CSS选择器
CSS选择器
简单介绍一下CSS选择器
在 CSS 中，选择器是选取需设置样式的元素的模式。
-
传统CSS 2.1选择器
标签选择器 id选择器 class选择器（类选择器） 复合选择器 伪类 -
CSS 3新增选择器
元素关系选择器 序号选择器 属性选择器 CSS 3新增伪类 伪元素
标签选择器
- 标签选择器也称为元素选择器、类型选择器，它直接使用元素的标签名当作选择器，将选择页面上所有该种标签。
- 标签选择器将选择页面上所有的该种标签，无论这个标签所处的位置的深浅。
- 标签选择器的作用：“覆盖面”大，通常用于标签的初始化。
/*这里所有的span标签内容字体颜色都会变成棕红色*/
span{
color:#522;
}
id选择器
锚点也是id，datalist也对应的id
- 标签可以有id属性，是这个标签的唯一标识
- Id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，习惯上一般为小写字（注意一下命名规则ao）
- 同一个页面上不能有相同的id标签
/* 对应的html中的id为id1的标签将会拥有红棕色的字体*/
#id1{
color:#522;
}
class选择器
多个标签可以为相同的类名
同一个标签可以同时属于多个类（类名用空格隔开）【滴滴滴：这里肯定会考虑到同时设置的两个类存在样式重复的问题，如果设置内容冲突，则样式显示样式写在后面的一个】
<head>
<style>
.red {
color: red;
}
.green {
color: green;
}
style>
head>
<body>
<div class="red green">我是什么颜色呢div>
body>
<head>
<style>
.green {
color: green;
}
.red {
color: red;
}
style>
head>
<body>
<div class="red green">我是什么颜色呢div>
body>
这里补充一个特殊的类，原子类
-
原子类：CSS原子类并不是什么新的特性，而是一种写法，其特点就是一个类名对应一个样式，从而通过在标签上附加不同的类名来生成对应的效果，可以有效的减少CSS的相关代码。
- 在网页项目前，可以将所有的常用字号、文字颜色、外边距、内边距等都设置为单独的类。
- Html标签可以“按需选择”，快速添加样式
可能没有看懂，来个
.font-red{
color:red;
}
.flex{
display:flex;
}
.bg-color {
background-color: rgb(40, 139, 139);
}
(上面几个都是原子类，特点就是一个类名对应一个CSS规则，并且命名应该是和规则有关系的，使用直接在标签里插入样式)
这里是原子的简单介绍，可以看看：https://juejin.cn/post/7067819426556411935
【没有特殊情况，原子类还是少用为好】
通用选择器（通配符）
通用选择器（*被称之为通配符）：通用选择器用于匹配html中的所有标签
/* 比较常见的样式清除 */
*{
padding:0;
margin: 0;
}
【选中document的所有标签，进行样式统一（通配符什么的还是不要打堆堆使用，会影响网页性能，回流重绘的时候比较消耗时间，但是还是可以用哈，少用）】
复合选择器
符合选择器——后代选择器
- 注意说明：“后代”不一定是“儿子”（被包裹的子元素就可以）
- 后代选择器可以有很多空格，隔开好几代
<head>
<style>
/* 非"儿子"后代标签 */
.dad .great-grandson {
text-decoration: line-through;
}
.dad .son .grandson {
text-indent: 2em;
}
/* "儿子"后代标签 */
.dad .son {
font-weight: bolder;
}
style>
head>
<body>
<ul class="red dad">我是爹
<li class="blue son">我是大儿子
<div class="green grandson">我是大孙子
<div class="orange great-grandson">我是大曾孙div>
div>
li>
<li class="purple son">我是小儿子
<div class="grey grandson">我是大孙子
<div class="orange great-grandson">我是大曾孙div>
div>
li>
ul>
body>
（需要注意的是如果使用的是标签选择器，选择上的将会是所有为这种标签的后代，如果你只像选择“儿子”标签，那就看看下面的元素关系选择器）
交集选择器
交集选择器其实就是一种组合形式，锁定的是即是…又是的元素（标签），下面例子中将会选择到同时拥有point类以及标签类型为div的元素
<head>
<style>
div.point {
color: blueviolet;
}
style>
head>
<body>
<div class="point">我是拥有point的div标签div>
<div>我是单独的div标签div>
body>
【注意：中间没有空格ao，有空格就变成了后代选择器】
并集选择器
并集选择器也叫做分组选择器，用逗号表示分组，下面例子将会选中div标签或者是拥有point类的标签
<head>
<style>
div,
.point {
color: blueviolet;
}
style>
head>
<body>
<div class="point">我是拥有point的div标签div>
<div>我是单独的div标签div>
<section>我是混子section>
body>
伪类
伪类：是添加到选择器的描述性词语，指定要选择的元素的特殊状态
（超链接是会经常使用到伪类的，我们将会给链接不同的状态设置不同的样式，有用过百度的都看到过，点击百度中下面的新闻词条，点击的时候词条会变为蓝色，当你曾经访问过这条词条的时候，这个超链接将会是紫色的，所以接下来我们会讲一讲超链接的几种状态，以及传说中的"爱恨原则"，进而了解伪类可以使用的范畴等）
- 超级链接的四种状态
| 伪类 | 意义 |
|---|---|
| a:link | 没有被访问过的超链接 |
| a:hover | 正被鼠标悬停的超链接 |
| a:active | 正在被激活的超链接（以及按下，但还没有抬起） |
| a:visited | 已经被访问过的超链接 |
爱恨原则：超链接（a标签）的样式（选择器）书写要按照爱恨原则进行书写，否则伪类将会失效
关于爱恨原则不是说一定要按照上述顺序，爱恨原则的核心内容在于： a:hover必须置于a:link和a:visited之后，才有效，a:active必须在a：hover之后，才有效。而link、visited两个伪类间顺序无所谓，谁在前都可以
- 伪类是可以设置一个元素的特殊状态改变另一个元素的出现效果）
/*此时点击h3(悬停),div元素将会变为红色*/
h3:hover+div{
color:red;
}
元素关系选择器
{基本上都是从IE7开始兼容}
| 名称 | 解释 | 例子 |
|---|---|---|
| 子选择器 | 只会在选择器选中直接子元素的时候匹配，继承关系上更远的后代则不会匹配 | div>p |
| 相邻兄弟选择器 | 选中恰好处于另一个在继承关系上同级的元素旁边的物件 | div+p |
| 通用兄弟选择器 | 如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器 | p~span |
1. 子选择器：
- 只会去匹配直接的后代元素（简单来说就是只会去匹配紧跟着的儿子元素，孙子元素是不会被选中的，一定要去与后代选择器进行区分）
- 就不给例子了，不太能明显看出来（就是选儿子，但是实际项目中还是会用到的）
3. 相邻兄弟选择器：
- 相邻兄弟选择器(+)介于子选择器与通用兄弟选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中
- a+b就是选择“紧跟在a后面的一个b”
- 相邻兄弟选择器有一个很妙的用途就是用来设置中间元素的间隔（margin）
- 给个例子吧：
<head>
<title>元素关系选择器title>
<style>
/* 清除有序列表的默认样式(一般用通配符去清所有列表) */
* {
list-style: none;
}
/* 撑开看看，设置的怎么样 */
ul {
/* 只是为了好看，这不是重点 */
background: rgb(197, 219, 211);
border: 2px solid blueviolet;
width: 62px;
border-radius: 5px;
}
/* 来几个盒子看看 */
li {
height: 15px;
width: 15px;
background: rgb(156, 136, 159);
border-radius: 2px;
}
/* 利用相邻兄弟选择器设置间距 */
li+li {
/* 解释一下，这里就是设置的li同级，且紧跟着的一个li,
那么这样的话就只会产生li与li之间的间隔，首尾就不需要单独设置了 */
margin-top: 15px;
}
style>
head>
<body>
<ul>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
body>
html>
4. 通用兄弟选择器
- 兄弟选择器（~），b选择a元素之后所有同层级的b元素
- 举个
<head>
<title>通用兄弟选择器title>
<style>
.box~ul {
font-weight: bold;
background: rgba(227, 189, 189, .6);
}
style>
head>
<body>
<div class="box">
我是一个盒子
div>
<ul class="list1">
<li>我是一个无序列表的元素li>
<li>我是一个无序列表的元素li>
ul>
<ul class="list2">
<li>我是一个无序列表的元素li>
<li>我是一个无序列表的元素li>
ul>
<div>我是一个块级标签,且和box同级(我是他的兄弟)
<ul>
<li>我是box兄弟的儿子,也是个无序列表(我不会加粗有背景颜色)li>
ul>
div>
body>
序号选择器
简单描述一下，序号选择器的使用：有序列表和无序列表或者是大量重复的相同标签，你想去设置其中一个的样式（让他变得特殊），你可以用什么方法，用之前我们说的那就是给它加一个类名，或者给个id然后去设置样式，那还有没有别的方法呢，你还可以使用序号选择器【当然，还是建议用类选择器，这个会涉及到一个性能问题】
| 例子 | 意义 |
|---|---|
| :first-child | 第一个子元素 |
| :last-child | 最后一个子元素 |
| :nth-child(n) | 第n个子元素 |
| :nth-of-type(n) | 第n个某类型的子元素 |
| :nth-last-child(n) | 倒数第n个子元素 |
序号选择器-1（child）
这几个只能选子元素的有一个很重要的点，就是只能选上位置和类型同时满足的才会有效
:first-child
- 选择第一个子元素
<style>
.box p:first-child {
color: blueviolet;
}
style>
<div class="box">
<p class="g1">p1p>
<p class="g2">p2p>
<p class="g3">p3p>
<p class="g4">p4p>
div>
:last-child
- 选择最后一个子元素
<style>
.box p:last-child {
color: blueviolet;
}
style>
<div class="box">
<p class="g1">p1p>
<p class="g2">p2p>
<p class="g3">p3p>
<p class="g4">p4p>
div>
:nth-child(n)
- 选择第n个子元素
<style>
.box p:nth-child(3) {
color: blueviolet;
}
style>
<div class="box">
<p class="g1">p1p>
<p class="g2">p2p>
<p class="g3">p3p>
<p class="g4">p4p>
div>
序号选择器-2（type）
:nth-of-type(n)
- 第n个某类型的子元素
<style>
.box p:nth-of-type(2) {
color: blueviolet;
}
style>
<body>
<div class="box">
<p class="g1">p1p>
<p class="g2">p2p>
<p class="g3">p3p>
<p class="g4">p4p>
div>
body>
补充说明-选择奇or偶
我们是可以利用序号选择器进行奇偶元素的选择的。
<style>
.box p:nth-child(2n+1) {
/* 奇数位的元素被选中 */
color: blueviolet;
}
style>
可以去了解下兼容性ao~
属性选择器
- 属性选择器就是通过选中属性（属性值）从而选择标签
【属性选择器一半是对应着特殊标签或者说是元素的，比如说图片img标签】
CSS3新增伪类
| 伪类 | 意思 |
|---|---|
| :empty | 选择空标签 |
| :focus | 选择当前获得焦点表单元素 |
| :enabled | 选择当前有效的表单元素 |
| :disabled | 选择当前无效的表单元素 |
| :checked | 选择当前已勾选的单按钮或是复选框 |
| :root | 选择根元素,html标签 |
-这里就不具体说了，来一个好玩的例子
【改变你的高亮部分颜色】
<style>
p::selection {
background: rgb(107, 157, 204);
}
style>
<body>
<div class="box">
<p class="g1">111111111111p>
div>
body>
酱酱~伪元素天生是行内元素ao！！！
总结
其实，看上去CSS3的选择器有很多，但实际上很多都不怎么会用到，选择器这一部分要极其注意类选择器和id选择器。id选择器一般是会结合着事件监听使用的(DOM，BOM)，而类选择器的使用一般是在设置样式时。设置样式时不是很推荐使用标签选择器，这可能会影响网页加载速度（回流重绘上）