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;
  }
  

  

  并集选择器 ,

  多个选择器中，只要满足其中一个，就会被选中

  • 多个选择器之间用 , 隔开

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  

  .error,
  .important {
    color: red;
  }