元素选择符

元素选择符通常是HTML元素，但也有例外。主要是在XML中，在CSS文档中什么都可以作为选择符，因为XML可以自己创建新标记语言。但是在HTML中书写CSS样式时，选择符则是HTML中预定的元素，例如p,h1,div等。例：

div {
    color: red;
}

群组选择符

ok，群组选择符的应用是非常常用的，我们在开发中经常会遇到多个HTML元素应用同一种CSS样式，这时群组选择器则是最好的选择器之一了。

那我们来看看群组选择器的基本用法吧例如，在HTML页面中有div和p元素都要用到color属性样式

    div, p {
            color: red;
        }

也就是选择符之间用逗号进行隔开；并且放在一起的选择符的数量是没有任何限制的，也就是你想放多少选择符就可以放多少选择符。群组选择符可以在很大程度上压缩同类样式，这样得到的样式表更短，更加轻松。例如如下普通写法：

        h1 {
            color: red;
        }
        h2 {
            color: red;
        }
        h3 {
            color: red;
        }
        h4 {
            color: red;
        }

如下使用群组选择符的写法：

        h1, h2, h3, h4 {
            color: red;
        }

所以哪一种写起来更加轻松相信大家都一亩了然了吧。

通用选择符

通用选择符是在CSS2中引入的选择符，用星号代替(*). 他的作用很明显，就是选中HTML页面中的所有元素，给它们编写同样的样式
例如，我想要让HTML页面的所有元素的背景变成红色

        * {
            background-color: red;
        }

是不是感觉很简单呢？但是通用选择符（通配符选择器）在CSS中应用的很少。因为第一是它的CSS权重最低（到时候会出一篇文章讲解CSS权重的算法），第二是因为它的目标是所有的元素，所以应用的时候难免会出现意料之外的后果。

类选择符和ID选择符

类选择符

ok，先从类选择符开始说起。上面已经介绍了元素选择符，但是非常简单，难以满足现代网页错综复杂的样式需求。所以我们还需要更加特指和更加精准的CSS选择符。这时类选择符则是一个不二的选择。

例如：在一个HTML网页中，有很多段文落，现在有一个需求，就是需要在某一段文落中的某一组词进行特殊的样式处理，比如改变它的颜色。例：

<p>我是老司机我是老司机我是老司机我是<span>老司机</span>我是老司机我是老司机我是老司机</p>
<p>你是老司机你是老司机你是老司机你是老司机你是老司机<span>你是老司机你是老司机</span>你是老司机你是老司机</p>
<p>我喜欢编程我喜欢编程我喜欢编程我喜欢编程我喜欢编程我喜欢编程，<span class="pr">我是中国人，我喜欢编程我喜欢编程我喜欢编程我喜欢编程，你呢？</span></p>

ok，现在我要将第三段中用span元素包裹的文字改变它的颜色，那么我们用元素选择符就达不到我们的目的了。那么我们用类选择符就能很轻松的达到我们的目的。

        .pr {
            color: red;
        }

这样我们就很轻松并且很精准的就选择到了我们想要的那段文字，并添加了相应的样式。当然，要让类选择符起作用及，必须先给元素的class属性一个类（属性值），而我们在CSS样式表中，需要将相应你要处理的元素的class属性值作为类选择符，并且在前面要用. + 相应的元素的class属性值。如上述代码所示

当然类选择符也是可以搭配任何其它类型的选择符，例：

        span.pr {
            color: red;
        }

这样写更加的精准，权重会更高。表示只能选择span元素中有class属性的属性值为pr的元素，也能达到上述效果。一个元素的class属性中不止一个属性值，可以是多个类，他们之间用逗号隔开：

<p class="pr dr pg">我是老司机我是老司机我是老司机我是老司机我是老司机我是老司机我是老司机</p>

ID选择符

ID选择符类似于类选择符，但是它们之间也有不同之处。首先它们开头的符号不同，类选择符是. 开头，ID选择符是# 开头

    #container {
        display: block;

第二个区别是id选择符引用的是id属性的值，并不是class属性的值，这显而易见。当然最重要的是一个HTML文档中只能出现一个相同值的id属性，而class则可以出现多个。这也是id选择符用的比较少的原因之一。当然也是因为这个原因，所以这个选择器用于精确选择非常好，所以经常用于HTML文档中划分区域的元素中。

    <header id="header">
        <div></div>
        <div></div>
        <div></div>
    </header>

    <nav id="nav">
        <div></div>
        <div></div>
        <div></div>
    </nav>

    <div id="container">
        <div></div>
        <div></div>
        <div></div>
    </div>

属性选择符

前面我讲过的两个类选择符和id选择符，都是选择的属性的值。而属性选择器很显然是选择操作元素的属性进行选择和相应的操作。

属性选择符通常分为：简单属性选择符、精准属性值选择符、部分匹配属性值选择符、起始值属性选择符。

简单属性选择符

如果你想选择具有某个属性的元素，不去考虑它的属性值是什么，可以使用简单属性选择符。比如我想找到所有具有class属性的div元素，例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[class] {
            color: red;
        }
    </style>
</head>
<body>
    <div class="pr">hello World</div>
    <div>hello World</div>
</body>
</html>

注：属性选择符都是写在[这里面写属性选择符]里面的。当然它也是可以配合多种选择符来使用。

精准属性值选择符

精准属性值选择符就是通过属性加属性值来更加精确的选择到某元素。例如有两个a元素，分别是百度和淘宝，现在我要给百度这个链接一个文字颜色，则可以使用精准属性值选择符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a[href="http://www.baidu.com"] {
            color: red;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.taobao.com">淘宝</a>
</body>
</html>

这样就可以选择到百度链接了。

也可以使用多个属性选择符进行元素选择，用只要在后面加上[]就可以多加属性。例如：a[class="pr"][href="http://www.baidu.com"]。

根据部分属性值选择

根据属性选择符匹配字串

形式	说明
[foo\|="bar"]	选择的属性有foo属性，并且属性值是bar或者是以bar和一个英文破折号开头	[foo~="bar"]	选择的属性有foo属性，且其值是包含bar这一个词的一组词	[foo*="bar"]	选择的属性有foo属性，且其值是包含bar字串	[foo^="bar"]	选择的属性有foo属性，且其值以bar开头	[foo$="bar"]	选择的属性有foo属性，且其值以bar结尾

具体作者就不在这里重复了。详细可看W3school：www.w3school.com.cn/css/css_sel…

注：属性选择符中的属性值可以不区分大小写，只要在中括号结尾前加上i就可以了。 a[href$="HTTP" i]

后代选择符

首先了解后代选择符前先去了解以下HTML文档结构（树形结构）后代选择符也叫上下文选择符。比如，我要选择h1元素中的span元素，然后给它添加字体颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 span {
            color: red;
        }
    </style>
</head>
<body>
    <h1>
        <span>hello World</span>
    </h1>
</body>
</html>

后代选择符中每个选择符之间用空格进行分隔组成后代选择符。用后代选择符的前提是这个元素是某个元素的后代元素。比如上面的span就是h1的后代元素。当然后代选择符组成部分不仅仅只可以元素选择符，也可以是id选择符、类选择符等等。

子元素选择符

大家都知道，后代选择符的范围非常广，而如果我们只想选择某个元素的某个子元素，那么我们就可以使用子元素选择符。那么要使用子元素选择符，需要用>来连接例如，我想选择div下的子元素span：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div > span {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>hello World</span>
        <h2><span>great Father</span></h2>
    </div>
</body>
</html>

相邻选择符

它可以选择紧跟某个元素后面的元素，用 + 符号来表示，例如我想选择到标题元素的后面的div元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 + div {
            color: red;
        }
    </style>
</head>
<body>
    <h1>hello World</h1>
    <div>
        <span>hello World</span>
        <h2><span>great Father</span></h2>
    </div>
</body>
</html>

兄弟选择符

兄弟选择符用~表示。它可以选择某一个元素同一级别的元素进行样式操作。比如我想选择h1同一级别的ol元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 ~ol {
            background-color: red;
        }
    </style>
</head>
<body>
    
    <div>
        <h1>hello World</h1>
        <span>hello World</span>
        <h2><span>great Father</span></h2>
        <ol>
            <li><span>11</span></li>
            <li><span>21</span></li>
            <li><span>31</span></li>
        </ol>
        <p>hello World</p>
    </div>
</body>
</html>

伪类选择符

伪类选择符真的是一个神器，它让css选择符变得更加有趣，有了伪类选择符，我们可以做到以前只能用JavaScript才能做到的事情。它主要是指元素的某种特定的状态，给其赋予幽灵类。所有的伪类都是:后面跟着伪类
伪类有很多种，下面一一为大家介绍：

拼接伪类

CSS是允许进行拼接伪类。比如，我想要鼠标悬停在未访问链接时链接变成红色：

        a:link:hover {
            color: red;
        }

拼接伪类不能是相互排斥的，比如不能是即未访问又即已访问的状态。例：a:link:visited，这样是不能选择到的。

结构伪类

伪类大多数都是结构上的，伪类始终指代所依附的元素，根据其概念，这不难理解。比如想要选择爸妈的第一个孩子，那就必须是爸妈的第一个孩子，恰巧我是。#children:first-child。

选择根元素

:root始终选择的是HTML文档的根元素，也就是html。 :root {margin: 10px}

选择空元素

使用:empty可以选择没有任何子元素的目标元素，包括没有空白和任何文本节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:empty {
            display: none;
        }
    </style>
</head>
<body>
    
    <p></p>
    <p>

    </p>
    <p> </p>
    <p><!-- hello world --></p>
</body>
</html>

上面可以选择到第一个和第四个p元素。

选择唯一的子代

使用:only-child伪类，它选择的元素是另一个元素的唯一子元素。那么你可以选择所有带有a链接的图片，因为图片是a链接的唯一子元素 img:only-child ，就可以选择到a链接的图片了。

选择第一个和最后一个子代

为一个元素的第一个或最后一个元素应用特殊的样式是常见的需求。 :first-child 伪类选择一个元素的第一个子元素，这个元素必须是父元素中的第一个子元素。 :last-child 伪类选择一个元素的最后一个子元素，这个元素必须是父元素中的最后一个子元素。

注：元素:first-child:last-child 放在一起相当于only-child伪类的效果。

选择第一个和最后一个某种元素

:first-of-type和:last-of-type，会选择第一个或最后一个元素，并且这个元素在父元素中的其它相同元素中的第一个或最后一个元素，和:first-child，:last-child是有区别的。

选择每第n个子元素

:nth-child(n),nth-last-child(n),n为自然数，从0开始，也可以为特定的数字，选择到的这个元素是父元素中的第n个元素。

选择每第n个某种元素

:nth-of-type(n),nth-last-of-type(n).结合上面几种可以很轻松的理解，所以就不多说了。

动态伪类

主要是在页面渲染之后根据页面的变化而变化。主要是以a链接为主

超链接伪类

a:link 表示为访问状态,a:visited表示已访问状态。

UI状态伪类

伪类	说明
:enabled	指代启用的用户界面元素（例如表单元素），即接受输入的元素	:disabled	指代禁用的用户界面元素（例如表单元素），即不接受输入的元素	:checked	指代由用户或者文档默认选中的单选按钮或复选框	:indeterminate	指代即未选中也没有未选中的单选按钮或复选框，这个状态只能由DOM脚本控制	:default	指代默认选中的单选按钮或复选框、选项	:valid	指代满足所有数据有效性语义的输入框	:invalid	指代不满足所有数据有效性语义的输入框	:in-range	指代输入的值在最小值和最大值之间的输入框	:out-of-range	指代输入的值在空间允许的最小值和最大值之外的输入框	:required	指代必须输入值的输入框	:optional	指代无需输入值的输入框	:read-write	指代可由用户编辑的输入框	:read-only	指代不能由用户输入的输入框

否定伪类

也就是选择不满足条件的元素。选择符:not(条件)

伪元素选择符

伪元素和伪类很像。都是实现特定的效果。它在文档中插入虚构的元素，用::加伪元素

装饰首字母

::first-letter伪元素用于装饰任何非行内元素的首字母，或者是开头的标点符号。

装饰首行

::first-line，用于装饰元素的首行文本

创建前置和后置内容元素

::before,前置元素，::after，后置元素。这两个伪类元素的作用非常大，用的非常多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::before {
            content: "hello World";
            display: block;
        }
    </style>
</head>
<body>
    
    <div>

    </div>
</body>
</html>

这是在div中最前面插入before元素。before元素默认是行内元素。

今天的文章就写到这里了。基本是把css中的所有选择器都讲完了。第一次写文章肯定写的不好，有什么错误可以提点以下，谢谢。我也是正在学习前端中。

CSS选择器的介绍

元素选择符

群组选择符

通用选择符

类选择符和ID选择符

类选择符

ID选择符

属性选择符

简单属性选择符

精准属性值选择符

根据部分属性值选择

后代选择符

子元素选择符

相邻选择符

兄弟选择符

伪类选择符

拼接伪类

结构伪类

选择根元素

选择空元素

选择唯一的子代

选择第一个和最后一个子代

选择第一个和最后一个某种元素

选择每第n个子元素

选择每第n个某种元素

动态伪类

超链接伪类

UI状态伪类

否定伪类

伪元素选择符

装饰首字母

装饰首行

创建前置和后置内容元素

常见问题FAQ

掘金(月笙) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

元素选择符

群组选择符

通用选择符

类选择符和ID选择符

类选择符

ID选择符

属性选择符

简单属性选择符

精准属性值选择符

根据部分属性值选择

后代选择符

子元素选择符

相邻选择符

兄弟选择符

伪类选择符

拼接伪类

结构伪类

选择根元素

选择空元素

选择唯一的子代

选择第一个和最后一个子代

选择第一个和最后一个某种元素

选择每第n个子元素

选择每第n个某种元素

动态伪类

超链接伪类

UI状态伪类

否定伪类

伪元素选择符

装饰首字母

装饰首行

创建前置和后置内容元素

常见问题FAQ

掘金(月笙) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式