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

属性选择器 [属性]

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

属性选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素，非常适合包含多种组合属性值的场景
[attribute|=value]	属性值起始片段选择器，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

伪类选择器 :状态名

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

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

伪类选择器	例子	例子描述
:active	a:active	选择活动的链接。（鼠标点击标签，但是不松手时）
:checked	input:checked	选择每个被选中的<input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 “required” 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的 <input> 元素。
:read-write	input:read-write	选择不带 “readonly” 属性的 <input> 元素。
:required	input:required	选择指定了 “required” 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

列表中使用伪类选择器

伪类选择器	含义
li:nth-child(2)	第2个 li
li:nth-child(n)	所有的li
li:nth-child(2n)	所有的第偶数个 li
li:nth-child(2n+1)	所有的第奇数个 li
li:nth-child(-n+5)	前5个 li
li:nth-last-child(-n+5)	最后5个 li
li:nth-child(7n)	选中7的倍数

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