CSS-伪类选择器

最新推荐文章于 2024-04-14 14:25:59 发布

doreenore

最新推荐文章于 2024-04-14 14:25:59 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/u014136161/article/details/53520238

版权

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、动态伪类

动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类，如“:hover”,":active"和":focus"。先来看最常见的锚点伪类 :link ,:visited,:hover,:active, 对于这四个锚点伪类的设置，有一点需要特别注意，那就是他们的先后顺序，要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。如果你把顺序搞错了会给你带来意想不到的错误，大家对于这个应该很熟悉的，如果是初学的朋友，可以私下练习一下。其中:hover和:active又同时被列入到用户行为伪类中，他们所表达的意思是：

:hover用于当用户把鼠标移动到元素上面时的效果；
:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
:focus用于元素成为焦点，这个经常用在表单元素上。
由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

二、UI元素状态伪类

我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来

三、CSS3的:nth选择器

这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法：

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。

: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用来改变浏览网页选中文的默认效果

doreenore

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS-伪类选择器

一、动态伪类动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类，如“:hover”,":active"和":focus"。先来看最常见的锚点伪类 :link ,:visited,:hover,:active, 对于这四个锚点伪类的设置
复制链接

扫一扫

专栏目录