码迷,mamicode.com
首页 > Web开发 > 详细

CSS3之伪元素选择器和伪类选择器

时间:2016-09-12 00:45:42      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

a:link|a:visited|a:hover|a:active

在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的。

 

 

由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

技术分享
:focus
/* 伪类将应用于拥有键盘输入焦点的元素。 */
:first-child
/* 伪类将应用于元素在页面中第一次出现的时候。 */
:lang
/* 伪类将应用于元素带有指定lang的情况。 */
技术分享

 

伪元素选择器,伪元素的效果是需要通过添加一个实际的元素才能达到的。

技术分享
/* 为某个元素的第一行文字使用样式。 */
:first-line
/* 为某个元素中的文字的首字母或第一个字使用样式。 */
:first-letter
/* 在某个元素之前插入一些内容。 */
:before
/* 在某个元素之后插入一些内容。 */
:after
技术分享

 

技术分享

 

结构性伪类选择器

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

:not()选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。

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

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

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

:nth-child()选择某个元素的一个或多个特定的子元素。

技术分享
<!DOCTYPE html>
<html>
    <head></head>
    <style type="text/css"> 
        div p:nth-child(n){
            color:red;
        }
        div p:nth-child(2n){
            color:yellow;
        }
    </style>
    <body>
        <div>
            <p>111</p>
            <p>222</p>
            <p>333</p>
            <p>444</p>
            <p>555</p>
        </div>
    </body>
</html>
技术分享


:nth-last-child()从某父元素的最后一个子元素开始计算,来选择特定的元素。

技术分享
<!DOCTYPE html>
<html>
    <head></head>
    <style type="text/css"> 
        div p:nth-last-child(2){
            color:red;
        }
    </style>
    <body>
        <div>
            <p>111</p>
            <p>222</p>
            <p>333</p>
            <p>444</p>
            <p>555</p>
        </div>
    </body>
</html>
技术分享

:nth-of-type(n)选择器和:nth-child(n)选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用:nth-of-type(n)选择器来定位于父元素中某种类型的子元素是非常方便和有用的。

 

:only-child表示的是一个元素是它的父元素的唯一一个子元素。

 

CSS3中的伪元素

CSS3对伪元素进行了一定的调整,在以前的基础上增加了一个:
也就是现在变成了::first-letter,::first-line,::before,::after
另外还增加了一个::selection

 

在css3中,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

 

::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式,我们就可以使用这个

::before::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动

技术分享
<!DOCTYPE html>
<html>
    <head></head>
    <style type="text/css"> 
        .test:before{
            content:"Hello";
        }
        .test.after{
            clear:both;
        }
    </style>
    <body>
        <div class="test"></div>
    </body>
</html>
技术分享

::selection用来改变浏览网页选中文的默认效果

 

UI状态元素伪类选择器

E:checked{attribute} 匹配所有用户界面(form表单)中处于选中状态的元素
E:enabled{attribute} 匹配所有用户界面(form表单)中处于可用状态的元素
E:disabled{attribute} 匹配所有用户界面(form表单)中处于不可用状态的元素
E::selection{attribute} 匹配元素中被用户选中或处于高亮状态的部分

 

目标伪类

E:target{attribute}   匹配相关URL指向的元素

 

CSS3之伪元素选择器和伪类选择器

标签:

原文地址:http://www.cnblogs.com/longxue/p/5863270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!