2、子元素选择器
作用：和后代类似，子元素选择器只能选择作为某元素子元素的元素。
格式：.one>#two>div{}
实例：类名为one下面的id为two下面的div文字颜色改为red
<div class="one"> <div id="two"> <div></div> </div></div>________________.one>#two>div{ color: red;}
3、兄弟选择器
3.1选择下一个兄弟(仅是挨着我的)
语法：兄+弟{}
实例：仅选择挨着p标签的div标签文字颜色变为blue
<p>我不会变色 <span class="rou" id="">我也不变</span></p><div>我会变成蓝色</div>————————————————p + div{ color: blue;}
3.2选择下面所有的兄弟(前面的不选)
语法：兄~弟{}
实例：选择p标签后面的所有span标签字体颜色改为blue
<p>我不会变色 <span class="rou" id="">我也不变</span></p><span>我会变成蓝色</span><span>我也变成蓝色</span>——————————————p ~ span { color: blue;}
四、属性选择器（5种）
1、选择含有指定属性的元素。
语法：[属性名]{}
实例：选择属性名title的元素,设置字体颜色red，这里1、2、3、4、5会变成红色，6不会改变。
<h1 title="a">111</h1><h2 title="ab">222</h2><p title="abc">333</p><p title="abab">444</p><p title="c">555</p><p>666</p>—————————————————————— [title]{ color:red;}
2、选择含有指定属性及指定属性值的元素。
语法：[属性名=属性值]{}
实例：选择属性名为title和属性值为ab的元素 ,设置字体颜色red,这里222会变成红色。
<h1 title="a">111</h1><h2 title="ab">222</h2><p title="abc">333</p><p title="abab">444</p><p title="c">555</p><p>666</p>——————————————————————[title=ab]{ color: red;}
3、选择含有指定属性及指定属性之开头的元素。
语法：[属性名^=属性值]{}
实例：选择属性名为title和属性值以ab开头的元素，设置字体颜色red，这里2、3、4会变成红色。
<h1 title="a">111</h1><h2 title="ab">222</h2><p title="abc">333</p><p title="abab">444</p><p title="c">555</p><p>666</p>——————————————————————[title^=ab]{ color: red;}
4、选择含有指定属性及指定属性值结尾的元素。
语法：[属性名$=属性值]
实例：选择属性名为title和属性值以ab结尾的元素，设置字体颜色为红色，这里2、4会改变颜色
<h1 title="a">111</h1><h2 title="ab">222</h2><p title="abc">333</p><p title="abab">444</p><p title="c">555</p><p>666</p>——————————————————————[title$=ab]{ color: red;}
5、选择含有指定属性，只要含有某个属性值的元素。
语法：[属性值*=属性名]{}
实例：选择属性名为title和属性值含有c的元素，设置字体颜色为red，这里3、5会改变颜色。
<h1 title="a">111</h1><h2 title="ab">222</h2><p title="abc">333</p><p title="abab">444</p><p title="c">555</p><p>666</p>——————————————————————[title*=c]{ color: red;}
五、伪类选择器（3类）
伪类选择器用于向某些选择器添加特殊的效果。使用冒号“：”
1、静态伪类选择器（2种）
用法及作用：
：link 未访问的链接
：visited 已访问的链接 （已经点击过的链接）
2、动态伪类选择器（3种）
：hover 鼠标移到连接上
：active 选定的链接（点击不松开鼠标时显示的状态）
：focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
实例：链接‘百度’在未点击时为red，点击过后是green，鼠标放上去是pink，保持点击不松开鼠标是blue。
本文地址：百科问答频道 https://www.neebe.cn/wenda/930903_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
