正文
H5与CS3权威下.19 选择器（2）结构性伪类选择器
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.CSS中的伪类选择器及伪元素
（1）与自定义的class类选择器不同，伪类选择器是CSS中已经定义好的选择器。
eg：a:link{color:#ff0000;}
（2）伪元素的使用方法：
选择器：伪元素{属性：值}
选择器.类名：伪元素{属性：值}
2.css中常用的伪元素选择器
（1）first-line：向某元素中的第一行文字使用样式。
eg：
<p>伪元素选择器 <br>类选择器</p>
p:first-line{background: pink;}
（2）first-letter：用于向某个元素中的文字的首字母（欧美文字）或是第一个字（中文或是日文等汉字）使用样式。
eg：
<p>伪元素选择器 ,类选择器</p>
<p>Hello!</p>
p:first-letter{font-size: 20px;color:red;}
（3）before：用于在某个元素之前插入一些内容。
eg：
<ul>
<li>linshuling</li>
<li>linshuling</li>
<li>linshuling</li>
<li>linshuling</li>
<li>linshuling</li>
</ul>
ul{list-style: none;}
li:before{content:"*";}
注意：如果content后面的内容不加双引号，会出现错误。（Firefox版本为50.1.0）
li:before{content:*;}
也可以插入其他内容：
eg：
li:before{content:url(01.jpg);}
（4）after：用于在某个元素之后插入一些内容。
ul{list-style: none;}
li:after{content:url(01.jpg);}
li:after{content:"0000";}
3.结构性伪类选择器——允许开发者根据文档树中的结构来指定元素的样式。
（1）root选择器：将样式绑定到页面的根元素中。在HTML中页面中指的是整个页面的“<html>”部分。
eg：
:root{background: pink;}
body{background: yellow;}
注意：
body{background: yellow;}
如果仅仅是定义body的背景颜色，而不定义：root，则整个页面都会变成黄色。
（2）not选择器：对某个结构元素使用样式，但是想排除这个结构下面的子结构元素，让它不使用这个样式，可以使用not选择器。
eg：
body :not(h1){color:red;font-size: 16px;}
<h1>hello!</h1>
<ul>
<li>linshuling</li>
<li>linshuling</li>
<li>linshuling</li>
<li>linshuling</li>
<li>linshuling</li>
</ul>
注意：not选择器的使用格式，：not（h1），不能写成not（“h1”），不然会出现错误。
（3）empty选择器：用来指定当元素中的内容为空白时使用的样式。
eg：
<h1>hello!</h1>
<ul>
<li>linshuling</li>
<li>linshuling</li>
<li></li>
<li>linshuling</li>
<li>linshuling</li>
</ul>
:empty{background: pink;}
（4）target选择器：用来对页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
eg：
<a href="#text1">实例文字1</a>
<a href="#text2">实例文字2</a>
<div id="text1">
<h2>linshuling</h2>
</div>
<div id="text2">
<h2>linshuling</h2>
</div>
:target{
background: pink;
}
如上的例子，点击“实例文字2”时，第二行的背景颜色会变为粉红色。点击“实例文字1”，第一行的背景颜色会变为粉红色。
