CSS使用注意(2):关于伪类选择器

浏览数：24 / 时间：2015年06月09日

<!doctype html>
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>CSS伪元素选择器</title>
    <style type="text/css">
    /*
    伪元素选择器:
    伪元素的效果是需要通过添加一个实际的元素才能达到的.

    CSS中有如下四种伪元素选择器:
    :first-line:为某个元素的第一行文字使用样式;
    :first-letter:为某个元素中的文字的首字母或者第一个字使用样式;
    :before:在某个元素之前插入一些内容;
    :after:在某个元素之后插入一些内容;
    */
     p:first-line{background-color:yellow;}
     p:first-letter{color:green;}
     p:before{content:"这是:";}
     p:after{content:"!该结束了";}
     /*
     伪类选择器:
     和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.
     只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.
     伪类的效果可以通过添加一个实际的类来达到.

     常用的伪类选择器是使用在a元素上的几种.
     如:a:link,a:visited,a:hover,a:active.
     提示:在css定义中,a:hover必须被置于a:link和a:visited之后,才是有效的.
     提示:在CSS定义中,a:active必须置于a:hover之后,才是有效的.

     结构性伪类选择器:
     :root()选择器:从字面上我们就可以很清楚的理解是跟选择器,
     他的意思就是匹配元素E所在的根元素.在HTML文档中,根元素始终是<html>.
     "root"选择器等同于<html>元素.

     :not()选择器:否定选择器.和jquery中的:not选择器一模一样,
     可以选择除了某个元素之外的所有元素.

     :empty()选择器表示的就是空.用来选择没有任何内容的元素,
     这里没有内容指的是一点内容都没有,哪怕是一个空格.

     :target()选择器来对页面某个target元素(该元素的id被当作
     页面中的超链接来使用)的指定样式;该元素只在用户点击了页面中的超链接,
     并且跳转到target元素后其作用.

     :first-child()选择器表示的是选择父元素的第一个子元素的元素E.简单点理解
     就是选择元素中的第一个子元素,记住是子元素,而不是后代元素.

     :nth-chind()选择某个元素的一个或多个特定的子元素.
        :nth-child(lenth)参数是具体的数字
        :nth-child(n)参数是n,n从0开始计算
        :nth-child(n*lenth)n的倍数选择,n从0开始计算.
        :nth-child(n+lenth)选择大于length后面的元素.
        :nth-child(-n+lenth)选择小于length后面的元素.
        :nth-child(n*lenth+1)选择隔几选一.
    以上length为整数.

    :nth-last-child()从某父元素的最后一个一个子元素开始计算,来选择特定的元素.
    :nth-of-child(n)选择器来定位于父元素中某种类型的子元素.
     */

     :not(p){color:red;}
     :empty{width:100px;height:20px;background:red;display:inline-block;}
     :target{background:blue;}
     div p:first-child{background:gray;}
     div p:first-child(2n){background:yellow;}
    </style> 
</head>
<body>

<p>
	伪元素选择器:为元素的效果是需要通过添加一个实际的元素才能达到的.
	CSS中有如下四种伪元素选择器:
	:first-line:为某个元素的第一行文字使用样式.
	:first-letter:为某个元素中的文字的首字母或者第一个字使用样式.
	:before:在某个元素之前插入一些内容:
	:after:在某个元素之后插入一些内容.
</p>

<a href="#A">AAAAAAAA</a>
<a href="#B">BBBBBBBB</a>
<div id="A">AAAAAA</div>
<div id="B">BBBBBB</div>

<!--伪类-->
<div>
	<p>1111</p>
	<p>2222</p>
	<p>333333</p>
	<p>444444</p>
</div>

</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS使用注意(2):关于伪类选择器