伪类 <br /> /*<br /> <strong>伪元素选择器： <p>伪元素的效果是需要通过添加一个实际的元素才能达到的。<br /> CSS中有如下四种伪元素选择器：<br /> · :first-line:为某个元素的第一行文字使用样式；<br /> · :first-letter:为某个元素中的文字的首字母或第一个字使用样式；<br /> · :before:在某个元素之前插入一些内容；<br /> · :after: 在某个元素之后插入一些内容；<br /> */<br /> p:first-line{ background-color:yellow;}<br /> p:first-letter{color:blue;}<br /> p:before{content:"这是：";}<br /> p:after{content:"！结束了";} <br /> /*<br /> <strong>伪类选择器： <p> 和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。<br /> 只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。<br /> 伪类的效果可以通过添加一个实际的类来达到。 <p> 常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`<br /> 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。<br /> 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 <p> 结构性伪类选择器<br /> :root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。“:root”选择器等同于<html>元素<br /> :not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。<br /> :empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。<br /> :target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用<br /> :first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。<br /> :nth-child()选择某个元素的一个或多个特定的子元素；<br /> :nth-child(length);/*参数是具体数字<br /> :nth-child(n);/*参数是n,n从0开始计算<br /> :nth-child(n*length)/*n的倍数选择，n从0开始算<br /> :nth-child(n+length);/*选择大于length后面的元素<br /> :nth-child(-n+length)/*选择小于length前面的元素<br /> :nth-child(n*length+1);/*表示隔几选一<br /> //上面length为整数<br /> :nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素。<br /> :nth-of-type(n)”选择器来定位于父元素中某种类型的子元素<br /> */<br /> :not(p){color:red;}<br /> :empty{width:100px;height:20px;background:red;display: inline-block;}<br /> :target{background:blue;} <br /> div p:first-child{background:gray;}<br /> div p:nth-child(2n){background:yellow;} <p> 伪元素选择器：伪元素的效果是需要通过添加一个实际的元素才能达到的。CSS中有如下四种伪元素选择器： :first- line:为某个元素的第一行文字使用样式； · :first-letter:为某个元素中的文字的首字母或第一个字使用样式； · :before:在某个元素之前插入一些内容； · :after: 在某个元素之后插入一些内容； AAAAAAAABBBBBBBBAAAAAA BBBBBBB 1111 2222 333333 444444
