CSS常用十大选择器（理论+代码实操）

HTML代码实例

注意：拷贝后本地运行注意head标签中的link标签的href属性是否正确

我的目录结构：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../css/selector.css"></head><body><!--元素选择器--><a href="https://www.baidu.com/">这是一个a标签</a><!--id选择器--><div id="aa">aa-div</div><!--类选择器--><div class="AA">AA-div1</div><div class="AA">AA-div2</div><!--属性选择器--><br><br><em lang="en" class="em1">english</em><br><br><em lang="zh" class="em1">中文</em> <br><br><em lang="fr">french</em><br><br><em lang="ru">ruissa</em><br><br><!--包含选择器--><div class="BB0"><p>1111</p><div><p class="BB2">BB-div内部的p</p></div></div><p class="BB">BB-div外部的p</p><!--子选择器--><table class="TB"><thead><tr><th>1</th><th>2</th><th id="th">3</th><th>4</th><th>5</th></tr></thead><tbody><tr><th>1-1</th><th>1-2</th></tr><tr><th>2-1</th><th>2-2</th></tr></tbody></table><!--兄弟选择器--><ol><li>早睡早起</li><li class="BRO">多吃蔬菜</li><li>心情舒畅</li><li>多多运动</li></ol><!--伪类选择器--><a class="weiLei" href="https://www.tencent.com/zh-cn/index.html">腾讯官网</a><!--伪元素选择器--><div>伪元素选择器------所有div元素的第一个汉字放大，加粗，红色</div></body>
</html>

元素选择器

直接用html标签命名，对整个html文档的全部此标签生效

/*元素选择器*/
a {/*对所有的a标签生效*/font-size: 22px;color: brown;
}

在这里插入图片描述

id选择器

#+id名称，根据标签的id属性进行选择，id由用户自定义，建议保证唯一性

所有标签都具有id属性

在这里插入图片描述

/*id选择器*/
#aa {background: aquamarine;
}

在这里插入图片描述
首字母字号变大+红色是伪元素选择器的效果，我们稍后就讲

class选择器

.+class名称使用，根绝标签的class属性选择

所有的标签都有class属性

在这里插入图片描述

.AA {width: 500px;height: 200px;background: antiquewhite;
}

在这里插入图片描述

属性选择器

标签名[属性名]，可以根据属性值进行多种类型的匹配
在这里插入图片描述

/*1. 是否存在*/
em[lang] {color: red;
}/*2. 属性=“”*/
em[lang="zh"] {font-size: 100px;
}
/* class属性的=可以简写*/
em.em1 {font-weight: bolder;
}/*3. 属性以“”开头*/
em[lang^="e"] {background: greenyellow;
}/*4. 属性包含“”*/
em[lang*=r] {font-size: 50px;font-weight: lighter;
}/*5. 属性以“”结尾*/
em[lang$="u"] {color: cornflowerblue;}

属性是否存在

所有em标签中lang属性不为空的，字体都会变成红色

在这里插入图片描述

russia被其他效果覆盖了，其实原本也是红色

属性 = xxx

em标签中，lang标签 = zh的标签也是有的，“中文”变成了100像素大小

如果选中的属性是class属性，em[class = xxx]可以简写为em.xxx

属性以xxx开始

en属性值以e开始，所以背景变成了黄绿色

属性包含xxx

fr属性和ru属性都包含r，所以他们两个都会变成50px字号+字体更细

属性以xxx结尾

ru属性值以u结尾，所以字体颜色会变成天蓝色，覆盖掉之前的红色

包含选择器

不严格的父子关系，只要包括即可

中间的空格不写，很容易与属性选择器中的属性 = xxx的class属性简写的情况搞混，千万要注意是否有空格
在这里插入图片描述

/*包含选择器，不严格的父子关系*/
.BB0 p {width: 150px;height: 100px;background: aqua;}

在这里插入图片描述
我们可以看到class为BB0的标签内部的所有p标签都生效了，也就是说对儿子和孙子都生效，都变成了aqua颜色的背景，同时宽高也被调整

父子选择器

严格的父子关系，孙子不会生效

在这里插入图片描述

/*子选择器,严格的父子关系*/
/*TB只是装饰，父子选择器在下面*/
.TB {border: 5px solid blue;
}/*父子关系不严格，不生效*/
.TB > tr > th {background: black;
}/*父子关系严格，生效，所有的孩子都会生效*/
.TB > thead > tr > th {border: 2px solid black;
}

在这里插入图片描述
不严格的父子关系没生效（表头的背景为黑色没生效）

严格的父子关系生效了（黑色的边框线）

兄弟选择器

分为一般兄弟选择器和紧邻兄弟选择器

一般兄弟选择器

用~连接兄弟，从基准选择器开始，向下识别它的所有兄弟元素(不包括基准选择器)

紧邻兄弟选择器

用+连接兄弟选择器，从基准选择器开始，向下识别它的第一个兄弟元素（不包括基准选择器）

在这里插入图片描述

/*兄弟选择器*/
/*基准选择器~基准选择器的兄弟选择器*//*一般兄弟选择器*/
/*从基准选择器开始，向下识别它的所有对应的兄弟元素*/
.TB > thead > tr > #th ~ th {background: green;
}/*紧邻兄弟选择器*/
/*从基准选择器开始，向下识别它的紧邻的一个兄弟元素*/
.BRO + li {font-style: italic;color: orangered;}

在这里插入图片描述

我们可以看到表头的id为th的th元素的后面的所有兄弟th元素都匹配到了，背景颜色变成了green（一般兄弟选择器）

我们还可以看到class属性为BRO的li元素的下一个兄弟li元素被匹配，字体变成了斜体，颜色为橘红色（紧邻兄弟选择器）

组合选择器

其实就是各种选择器的排列组合，不同的选择器用逗号隔开

/*组合选择器*/
/*不同的选择器，用逗号隔开，表示设置相同的属性*/.BB0 p, .TB > thead > tr > th {/*包含选择器，父子选择器*/width: 200px;height: 300px;background: blueviolet;
}

在这里插入图片描述
对应部分的背景颜色都变成了紫色

伪类选择器&&伪元素选择器

伪，假装的意思；
好像有这个类，但实际上没有
好像有这个元素，但实际没有

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于html文档之外的抽象，所以叫伪类。

伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于html文档之中，所以叫伪元素。

实际使用有很多伪选择器，比如anchor伪类，:before，:after，:focus等，详见

CSS 伪类 | 菜鸟教程 (runoob.com)

CSS 伪元素 | 菜鸟教程 (runoob.com)

demo

在这里插入图片描述

/*伪类选择器*//*anchor伪类*/
.weiLei:hover {color: gray;
}/*first-child 伪类*//*:focus伪类。*//*伪元素选择器*/div:first-letter {font-size: 36px;color: red;font-weight: bolder;
}