css选择器用法

1.元素选择器（标签选择器）

　　元素名称{

　　　　}

2类选择器

　　以点开头{

　　　　}

3.id选择器器

　　　以#号开头

4.后代选择器

　　空格分隔

5.子类选择器

　　>大于号分隔

6.相邻兄弟选择器

　　+连接

　　选择与指定元素在同一层级且紧接在它后面的元素（只有一个）。

h2 + p {
  color: green;
}

7.通用兄弟选择器：

　　~波浪号连接

　　选择与指定元素在同一层级的所有后续兄弟元素（多个）。

h2 ~ p {
  color: black;
}

8.群组选择器（，分隔）：

允许您同时选择多个元素，并将相同的样式应用于它们。

  h1, h2, p { 
  color: blue; 
  }

9.属性选择器

　　等于属性选择器([attribute="value"]): 选择具有指定属性且属性值完全等于指定值的元素。

a[target="_blank"] {
  color: red;
}

10.包含属性选择器([attribute~="value"]):

　　选择属性值包含指定完整子串的元素。

a[title~="example"] {
  color: green;
}

11.起始属性选择器([attribute^="value"]):

　　选择属性值以指定子串开头的元素。

a[href^="https"] {
  color: black;
}

12.结尾属性选择器([attribute$="value"]):

选择属性值以指定子串结尾的元素。

a[href$=".pdf"] {
  color: blue;
}

13.子串属性选择器([attribute*="value"]):

　　选择属性值包含指定子串的元素。

a[href*="example"] {
  color: red;
}

14. 伪类选择器
　　动态伪类选择器：用于选择处于特定状态的元素。
　　　　　　:hover：当鼠标指针悬停在元素上时触发。
　　　　　　:active：当元素被用户激活（例如点击）时触发，选择活动链接（鼠标点击未释放时的状态）。
　　　　　　:focus：选择获得焦点的元素，如通过键盘或鼠标点击选中的元素。当元素获得焦点时触发，常见于输入框、按钮等。
　　　　　　:visited：选择已访问过的链接。
　　　　　　:link：选择未访问过的链接。
　　　　结构伪类选择器: 基于元素在文档树中的位置或与其他元素的关系来选择元素。选择文档树中特定结构的元素。

　　　　　　:first-child：选择父元素的第一个子元素。

　　　　　　:last-child：选择父元素的最后一个子元素。

　　　　　　:nth-child(n)：选择父元素的第n个子元素，n可以是数字、关键词（如"even"和"odd"）或公式（如2n+1）。

　　　　　　:nth-last-child(n)：类似于:nth-child(n)，但它是从最后一个子元素开始计数的。

　　　　　　:only-child：选择父元素仅有一个子元素，且该子元素匹配选择器的元素。

　　　　　　:first-of-type：选择父元素下相同类型元素的第一个子元素。

　　　　　　:last-of-type：选择父元素下相同类型元素的最后一个子元素。

　　　　　　:nth-of-type(n)：选择父元素下相同类型元素的第n个子元素。

　　　　　　:nth-last-of-type(n)：类似于:nth-of-type(n)，但它是从相同类型元素的最后一个子元素开始计数的。

　　　　　　:only-of-type：选择父元素下与其类型相同的唯一子元素。

　　　　　　:empty（空伪类）：选择没有任何子元素（包括文本节点）的元素。

　　　　　　表单伪类选择器: 用于表单元素，根据表单元素的状态来选择元素。

　　　　　　:checked：选择被选中的表单元素，如单选框、复选框等。
　　　　　　:enabled：选择启用的表单元素。
　　　　　　:disabled：选择被禁用的表单元素。
　　　　　　:read-only：选择只读的表单元素。
　　　　　　:read-write：选择可写的表单元素。
　　　目标伪类选择器:

　　　　　　:target：选择当前活动的目标元素，即URL的片段标识符（#后面的部分）指向的元素。
　　否定伪类选择器:

　　　　　　:not(selector)：选择不符合特定选择器的元素。允许你选择不匹配该选择器的所有元素，它可以用在几乎任何选择器中，来排除某些不需要的元素。

/* 动态伪类选择器 */
a:hover {
  color: red;
}

/* 结构伪类选择器 */
ul li:first-child {
  font-weight: bold;
}

/* 表单伪类选择器 */
input[type="checkbox"]:checked {
  background-color: yellow;
}

/* 目标伪类选择器 */
:target {
  border: 2px solid blue;
}

/* 否定伪类选择器 */
div:not(.special) {
  color: gray;
}

15:伪类元素选择器

　　　　伪元素选择器（::开头）: 用于选择元素的某个部分或向元素添加虚拟内容，并允许为这些虚拟内容或特定部分设置样式。
　　　　文本相关伪元素
　　　　　　::first-letter：用于选择文本块的第一个字母，并允许为其设置特殊的样式。这常用于实现首字下沉或特殊首字母效果。
　　　　　　::first-line：用于选择文本块的第一行，并允许为其设置与后续文本不同的样式。这常用于强调段落或文本块的开头部分。
　　　　内容生成伪元素
　　　　　　::before：在元素的内容之前插入新的内容或装饰。这通常与content属性一起使用，以定义要插入的具体内容。
　　　　　　::after：在元素的内容之后插入新的内容或装饰。同样，这也需要content属性来指定要插入的内容。

p::first-line {
  color: blue;
}
p::first-letter {
  color: red;
}
p::before {
  content: "Before: ";
  color: green;
}
p::after {
  content: " After";
  color: black;
}

16.通配符选择器（*）:

　　选择页面上的所有元素。它在特定情况下（如重置样式）有着特殊的用途。

17.根伪类选择器（:root）:

　　　　选择文档的根元素（通常是<html>元素），并经常用于设置全局变量（CSS自定义属性）。

18.语言伪类选择器（:lang）：

　　　　用于选择具有特定语言属性的元素。它基于lang属性来选择元素，这在处理多语言网站时非常有用。