CSS选择器（包含CSS3新增的伪类和属性选择器等）

Posted 2023-03-25 Road to Code

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器（包含CSS3新增的伪类和属性选择器等）相关的知识，希望对你有一定的参考价值。

选择器

详见https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors
CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

*
     margin: 0;
     padding: 0;

元素选择器

HTML文档中的元素，p、b、div、a、img、body等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

p
    font-size:14px;

再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器

<p>学完了<span>前端</span>，继续学Java</p>
span
	color: red;

温馨提示

所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等

无论这个标签藏的多深，一定能够被选择上

选择的所有，而不是一个

类选择器

使用率最高
规定用圆点 . 来定义，针对你想要的所有标签使用

优点

灵活

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass
	width:800px;

class属性的特点

类选择器可以被多种标签使用

类名可以包含字母，横杠，数字（尽量少用），但不能以数字开头

同一个标签可以使用多个类选择器。用空格隔开

<h3 class="classone  classtwo">我是一个h3啊</h3>

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>  // 错误

实时效果反馈

1.下列代码哪个是类选择器使用方式：

A h1color:red;

B *margin:0;

C .titlecolor:red;

D h3color:red;

答案
1=>C

多类名

多类名是指一个元素的class属性中有多个类名。多个类名之间用空格隔开。使用了多个类名的标签就可以分别具有这些类名的样式
多类名开发中使用场景
(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3) 从而节省CSS代码,统一修改也非常方便

对比以下代码的区别

单类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>利用类选择器画三个盒子</title>
    <style>
        .red 
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        
        .green 
            width: 100px;
            height: 100px;
            background-color: green;
        
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>

多类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>利用类选择器画三个盒子</title>
    <style>
        .box /*把公共的样式放到一个类中*/
            width: 100px;
            height: 100px;
        
        .red 
            /* 背景颜色 */
            background-color: red;
        
        .green 
           
            background-color: green;
        
    </style>
</head>
<body>
    <div class="box red">红色</div>
    <div class="box green">绿色</div>
    <div class="box red">红色</div>
</body>
</html>

运用多类名，把公共的样式或需要修改的公共样式放到一个类中，从而减少了CSS代码量，方便修改

id选择器

针对某一个特定的标签来使用，规范上只能使用一次（虽然实际重复使用还是能显示出效果，但是不推荐这种写法）。css中的ID选择器以 # 来定义

<h2 id="mytitle">你好</h2>
#mytitle
    border:3px dashed green;

特别强调

ID是唯一的

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

伪类选择器

链接伪类/anchor伪类

CSS伪类是用来添加一些选择器的特殊效果
伪类的语法：
selector:pseudo-class property:value;
CSS类也可以使用伪类：
selector.class:pseudo-class property:value;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link color:#000000;      /* 未访问链接*/
a:visited color:#00FF00;  /* 已访问链接 */
a:hover color:#FF00FF;  /* 鼠标移动到链接上 */
a:active color:#0000FF;  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

这是一个链接

注意：因为特殊等级相等的样式后面的会覆盖前面的，所以应注意顺序

a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。

伪类可以与 CSS 类配合使用：

<style>
	a.red:visited color:#FF0000;
</style>
<a class="red" href="css-syntax.html">CSS 语法</a>

如果在上面的例子的链接已被访问，它会显示为红色。

结构伪类选择器/子元素伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素

选择器	描述
E:first-child	选择父元素下第一个子元素E
E:last-child	选择父元素下最后一个子元素E
E:nth-child(n)	选择父元素下第 n 个子元素E，n取值可以是数字、odd、even、计算表达式。注意第一个子元素的下标是 1
E:only-child	选择父元素下唯一的子元素E
E:nth-last-child(n)	选择父元素下倒数第 n 个子元素
E:first-of-type	选择父元素下第一个 E 类型的子元素
E:last-of-type	选择父元素下最后一个 E 类型的子元素
E:nth-of-type(n)	选择父元素下第 n 个 E 类型的子元素，n的取值可以是数字、odd、even、计算表达式
E:only-of-type	选择父元素唯一的 E 类型的子元素
E:nth-last-of-type(n)	选择所有 E 元素倒数的第 n 个为 E 的子元素

<head>
    <style>
        /* 1. 选择ul里面的第一个孩子li */
        ul li:first-child 
            background-color: pink;
        
        /* 2. 选择ul里面的最后一个孩子li */
        ul li:last-child 
            background-color: pink;
        
         /* 3. 选择ul里面的第2个孩子li */
         ul li:nth-child(2) 
            background-color: skyblue;
        
        ul li:nth-child(6) 
            background-color: skyblue;
        
    </style>
</head>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>

使用 :first-child 伪类来选择父元素的第一个子元素
第一个子元素p被选择

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p:first-child

	color:blue;
 
</style>
</head>

<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经声明.</p>
</body>
</html>

p标签的第1个直接孩子i被选择

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p > i:first-child

	color:blue;
 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经定义.</p>
</body>
</html>

以下是一个组合条件的选择器，首先p元素得是父元素的第一个孩子标签，在第一个p标签中的所有i标签都会被匹配

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p:first-child i

	color:blue;
 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>
</html>

nth-child（n）
nth-child（n）选择某个父元素的一个或多个特定的子元素（重点）

n 可以是数字，关键字和公式
nth-child(n), 括号里只能是字母n或数字, 不能是其他字符
n 如果是数字，就是选择第 n 个子元素
n 可以是关键字：even 偶数，odd 奇数
n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始逐步增1来计算，n=0,1,2,3···，第 0 个子元素或者超出了子元素的个数会被忽略 )

<head>
   <style>
        /* 把所有的偶数 even的孩子选出来 */
        ul li:nth-child(even) 
            background-color: #ccc;
        

        /* 把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) 
            background-color: gray;
        
        /* nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 */
        /* 选择了所有的孩子 */
        /* ol li:nth-child(n) 
            background-color: pink;
         */
        /* nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
        /* ol li:nth-child(2n) 
            background-color: pink;
        
        /* nth-child(2n)等价于nth-child(even) */
        ol li:nth-child(2n+1) 
            background-color: skyblue;
         
        /* 从第3个(包含)子元素开始选择 */
        /* ol li:nth-child(n+3) 
            background-color: pink;
         */
        /* 选择前3个子元素 */
        ol li:nth-child(-n+3) 
            background-color: pink;
        
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

nth-child与nth-of-type区别

nth-child 对父元素里所有孩子排序
nth-of-type 只对父元素里指定子元素排序

<head>
    <style>
        ul li:first-of-type 
            background-color: pink;
        
        ul li:last-of-type 
            background-color: pink;
        
        ul li:nth-of-type(even) 
            background-color: skyblue;
        
        /* 子元素p是第一个子元素 */
        section div:nth-child(1) 
            background-color: red;
        
        section div:nth-of-type(1) 
            background-color: blue;
        
    </style>
</head>

<body>
    <!-- 子元素都是同一类时2者无区别 -->
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

UI 伪类选择器

UI 伪类选择器是通过元素的状态来选择的一种选择器。
在 CSS3 中有以下几种 UI 伪类选择器。

选择器	描述
:focus	给获取焦点的元素设置样式
:checked	给被选中的单选框或者复选框设置样式
:enabled	给可用的表单设置样式
:disabled	给不可用的表单设置样式
:read-only	给只读表单设置样式
:read-write	给可读写的表单元素设置样式
	验证有效
:invalid	验证无效
::selection	给页面中被选中的文本内容设置样式

:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus background-color:yellow;
:checked伪类选择器
:disabled伪类选择器
:empty伪类选择器
:valid与:invalid
:valid与:invalid分别表示有效或无效时要设置的样式
例如：实现这样的效果，输入格式正确时输入框背景色为绿色，错误时为红色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*格式错误*/
      input:invalid 
        background-color: red;
      
      /*格式正确*/
      input:valid 
        background-color: green;
      
    </style>
  </head>
  <body>
    电子邮箱：<input type="email" />
  </body>
</html>

其他伪类选择器详见https://www.runoob.com/css/css-pseudo-classes.html

属性选择器

属性选择器可以根据元素特定属性（值）的来选择元素

<head>
    <style>
        /* 选择具有value属性的input标签*/
        input[value] 
            color:pink;
        
        /* 选择属性值type=text的input标签，选择器中的属性值可以不加引号 */
        input[type=text] 
            color: pink;
        
        /* 选择class属性值以icon开头的div元素 */
        div[class^=icon] 
            color: red;
        
        section[class$=data] 
            color: blue;
        
        /* 由CSS3层叠性知，“小图标1”会以skyblue颜色呈现 */
        div.icon1 
            color: skyblue;
        
    </style>
</head>
<body>
    <!-- 1. 利用属性选择器就可以不用频繁借助于类或者id选择器 -->
    <input type="text" value="请输入用户名">
    <input type="text">
    <!-- 2. 属性选择器还可以选择属性=值的某些元素，这是重点务必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>

</body>

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

before 和 after 创建的伪元素属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法： element::before
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
伪元素选择器和标签选择器的权重都为 1

    <style>
        div 
            width: 200px;
            height: 200px;
            background-color: pink;
        
        /* div::before 权重是2 */
        div::before 
            /* 这个content是必须要写的 */
            /* display: inline-block; */
            content: \'我\';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        
        div::after 
            content: \'小猪佩奇\';
        
    </style>
</head>
<body>
    <div>
        是
    </div>
</body>

使用场景1：伪元素字体图标
通过使用伪元素，就不用再额外在div中设置标签span来包裹在div右侧显示的内容，减少标签使用

    <style>
        @font-face 
            font-family: \'icomoon\';
            src: url(\'fonts/icomoon.eot?1lv3na\');
            src: url(\'fonts/icomoon.eot?1lv3na#iefix\') format(\'embedded-opentype\'),
                url(\'fonts/icomoon.ttf?1lv3na\') format(\'truetype\'),
                url(\'fonts/icomoon.woff?1lv3na\') format(\'woff\'),
                url(\'fonts/icomoon.svg?1lv3na#icomoon\') format(\'svg\');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        
        div
            position: relative;
            width: 100px;
            height: 30px;
            border: 2px solid red;

        
        div::after
            position: absolute;
            font-family: \'icomoon\';
            content: \'\\e91e\';
            color: red;
            right: 0;
            line-height: 30px;
        
    </style>
</head>
<body>
    <div></div>
</body>

器使用场景2：仿土豆效果

    <style>
        .tudou 
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        

        .tudou img 
            width: 100%;
            height: 100%;
        

        .tudou::before 
            /* 注意一定要有content属性，即使content中没有内容，可以用空字符串 */
            content: \'\';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        

        /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
        /* 注意:hover与::before之间没有空格 */
        .tudou:hover::before 
            /* 而是显示元素 */
            display: block;
        
    </style>
</head>

<body>
    <div class="tudou">
        <img src="images/tudou.jpg" >
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" >
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" >
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" >
    </div>
</body>

使用场景3：伪元素清除浮动

交集选择器

满足组合条件的才会被选择

/* div标签的class属性中有icon1的才会被选择 */
div.icon1 
    color: skyblue;

并集选择器

如果不同的选择器有相同的样式，就可以将选择器名称以,隔开，通过选择器组的形式写在一起，减少代码的重复
形式如下

选择优先级总结

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）,继承的样式：0
元素(类型)选择器:1
类选择器，属性选择器，伪类选择器:10
ID 选择器：100
内联样式：1000
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里。使用 !important 不是一个好习惯

CSS 优先级法则：

选择器都有一个权值，权值越大越优先；
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
继承的CSS 样式不如后来指定的CSS 样式；
在同一组属性设置中标有“!important”规则的优先级最大

<html>
  <head>
    <style type="text/css">
        #redP p 
             /* 权值 = 100+1=101 */
             color:#F00;  /* 红色 */
        
 
        #redP .red em 
             /* 权值 = 100+10+1=111 */
             color:#00F; /* 蓝色 */
 
        
 
        #redP p span em 
             /* 权值 = 100+1+1+1=103 */
             color:#FF0;/*黄色*/
        
    </style>
  </head>
  <body>
     <div id="redP">
        <p class="red">red
           <span><em>em red</em></span>
        </p>
        <p>red</p>
     </div>
  </body>
</html>

权值分析

	id	class	元素
#redP p	1	0	0
#redP .red em	1	1	1
#redP p span em	1	0	3
运行结果

<html>
  <head>
    <style type="text/css">
     #redP p
        /*两个color属性在同一组*/
        color:#00f !important; /* 优先级最大 */
        color:#f00;
     
    </style>
  </head>
  <body>
     <div id="redP">
       <p>color</p>
       <p>color</p>
     </div>
  </body>
</html>

运行结果

<html>
  <head>
    <style type="text/css">
     #redP p
        /*两个color属性在同一组*/
        color:#00f;
        color:#f00;//后面的样式会覆盖前面的，所以显示红色
     
    </style>
  </head>
  <body>
     <div id="redP">
       <p>color</p>
       <p>color</p>
     </div>
  </body>
</html>

实时效果反馈
以下代码执行后文本的颜色是绿色还是红色？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .t2
            color: green;
        
        .t1
            color: red;
        
    </style>
</head>
<body>
    <h1 class="t1 t2">我是内联样式方案</h1>
</body>
</html>

答案：红色，执行结果如下。因为在<style></style>中，选择器t1在t2之后执行，t1的执行结果覆盖了t2的执行结果。

以上是关于CSS选择器（包含CSS3新增的伪类和属性选择器等）的主要内容，如果未能解决你的问题，请参考以下文章

CSS3新增选择器

css选择器有哪些?哪些属性可以继承?优先级算法如何计算?新增的伪类有哪些？