CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）

CSS 样式选择器，用于选中页面中的 html 元素，以便添加 CSS 样式。

按渲染性能由高到低 依次是：

ID 选择器 #id

通过元素的 id 属性选中元素，区分大小写

<p id="p1" >第一段</p>

#p1{
  color: red;
}

但不推荐使用，因为：

• id 选择器的优先级较高，不方便重置样式
• id 选择器主要给 JS 使用

类选择器 .class

通过元素的 class 属性中的样式类名选中元素，区分大小写

最推荐使用的 CSS 选择器，因为类选择器语义化强，且方便重置样式。

<span class="important" >重点词汇</span>
 

.important{
  color: red;
  font-weight: bold;
}

同一个元素，可以添加多个样式类，用空格隔开

<span class="important big" >巨大的重点词汇</span>
 

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}

标签选择器 标签名

通过元素的标签名选中元素，不区分大小写

<a href="https://www.baidu.com/" target="_blank" >百度</a>
 

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}

不推荐使用，因为标签选择器性能不佳，维护成本高

通配选择器 *

选中页面中除伪元素外的所有 html 元素，常用于清除浏览器的默认样式，但不推荐使用，因为消耗性能。

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}

属性选择器 [属性]

根据元素的属性和属性值来选中元素，属性不区分大小写，属性值区分大小写

伪类选择器 :状态名

根据元素的不同状态来选中元素

同一个标签，不同的状态，有不同的样式，就叫做“伪类”

列表中使用伪类选择器

n 表示 0,1,2,3,4,5,6,7,8…（当n小于1时无效，因为n = 0 也是不会选中的）

表格中使用伪类选择器

• tr:nth-child(odd)：匹配表格的第1, 3, 5行，等同于tr:nth-child(2n+1)。
• tr:nth-child(even)：匹配表格的第2, 4, 6行，等同于tr:nth-child(2n)。

伪类选择器的实战范例

使用 :nth-child() 实现斑马条纹、对齐边缘、指定区间列表高亮、动态列表自适应布局

https://blog.csdn.net/weixin_41192489/article/details/122089484

CSS 实现动态显示隐藏（:checked 和 :target 的妙用）

https://blog.csdn.net/weixin_41192489/article/details/126267866

使用 :target 实现展开更多、收起、Tab选项卡切换https://blog.csdn.net/weixin_41192489/article/details/121969768

使用 :placeholder-shown 实现MaterialDesign风格的交互

https://blog.csdn.net/weixin_41192489/article/details/121976627

使用 :placeholder-shown校验空值、提示不能为空

https://blog.csdn.net/weixin_41192489/article/details/121977510

:checked 实现展开收起

https://demo.cssworld.cn/selector/9/2-1.php

:checked 实现选项卡切换

https://demo.cssworld.cn/selector/9/2-2.php

:checked实现自定义单选框、复选框、开关、标签复选、素材单选

https://blog.csdn.net/weixin_41192489/article/details/122050069

使用 :valid 和 :invalid 实现原生表单校验

https://blog.csdn.net/weixin_41192489/article/details/122070084

使用:required和:optional实现表单校验提示文字

https://blog.csdn.net/weixin_41192489/article/details/122072879

:focus-within 实现下拉列表

https://blog.csdn.net/weixin_41192489/article/details/121959850

输入框聚焦时，高亮前方的标签（见链接内的方法5）

https://blog.csdn.net/weixin_41192489/article/details/121784196

鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片

https://blog.csdn.net/weixin_41192489/article/details/121944791

:empty 隐藏空元素、缺失字段智能提示

https://blog.csdn.net/weixin_41192489/article/details/122086159

:only-child 实现多状态的动态加载动画

https://blog.csdn.net/weixin_41192489/article/details/122088416

:fullscreen 实现点击图片全屏显示

https://blog.csdn.net/weixin_41192489/article/details/122328725

伪元素选择器 ::

用于选择和样式化元素的一部分，而非整个元素

CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀

::before 和 ::after

需配合content属性一起使用，用于在元素前面和后面设置内容，详见

https://blog.csdn.net/weixin_41192489/article/details/115100040

常用的实战范例：

元素前后添加图标（::before 和 ::after 的妙用）

https://blog.csdn.net/weixin_41192489/article/details/134858462

css 巧用 ::after 和 ::before 实现竖排分类导航

https://blog.csdn.net/weixin_41192489/article/details/134885007

css 巧用 ::after 实现 tab 切换动效

https://blog.csdn.net/weixin_41192489/article/details/134881852

::first-letter 首字母

<p>很久很久以前</p>
<p>Long long ago</p> 

p::first-letter {
  font-size: 2em;
  color: red;
}

::first-line 第一行

  <div style="width: 120px">
    <p>很久很久以前，有一个白发苍苍的老人</p>
  </div>

p::first-line {
  color: red;
}

::selection 鼠标拖拽选中的区域

<p>很久很久以前，有一个白发苍苍的老人</p> 

p::selection {
  color: red;
  background-color: yellow;
}

::placeholder 文字占位符

<input placeholder="请输入" /> 

/* input 不写，则会选中页面所有元素的占位符 */
input::placeholder {
  color: red;
}

关系选择器

通过元素间的关系选中元素

子代选择器 >

标签内包裹的第一层标签是它的子代

<div>
    <p>我是div的儿子</p>
</div>

div>p{
  color:red;
}

后代选择器 空格

标签内的所有标签都是它的后代

  <div class="parent">
    <p class="red">我是子代（属于后代）</p>
    <p>我是子代（属于后代，但没有 .red）</p>
    <div>
      <div class="red">我是孙代（也属于后代）</div>
    </div>
  </div>

/* 所有属于.parent元素内部的.red元素都将被染成红色。*/
.parent .red {
  color: red;
}

兄弟选择器 ~

选中同一个父元素下，在指定元素之后的所有同级元素，所以严格讲，应该叫 后面兄弟选择器

<div>
  <button>按钮1(不会变红)</button>
  <p>段落</p>
  <button>按钮2（会变红）</button>
</div>

p ~ button {
  color: red;
}

CSS 没有 前面兄弟选择器 ，可以参考下方链接模拟实现

https://blog.csdn.net/weixin_41192489/article/details/121784196

相邻兄弟选择器 +

选中紧跟在一个元素之后的下一个元素

  <div class="parent">
    <p>段落</p>
    <button>按钮1</button>
    <button>按钮2</button>
  </div>

p + button {
  color: red;
} 

交集选择器

选中页面中同时符合多个选择器的元素

• 选择器之间没有空格（有空格就是后代选择器）
• 如果存在标签选择器，标签选择器必须放在前面

<p class="red">很久很久以前1</p>
    <p>很久很久以前2</p> 

/* 选中 p 标签中class值含 red 的元素 */
p.red {
  color: red;
}