CSS复合选择器

交集选择器

• 作用：选中同时符合多个条件的元素

交集右并且的含义（通俗理解：即…又…的意思），例如：既年轻又漂亮

• 语法：选择器1选择器2选择器3…选择器n {}
• 举例：

p.paragraph {
  color: red;
}
.number.ul-li-one {
  color: blue;
}

• 注意：
  • 有标签名，标签名必须写在前面
  • id选择器、理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义
  • 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素
  • 用的最多的交集选择器是：元素选择器配合类选择器，例如：p.paragraph

并集选择器

• 作用：选中多个选择其对应的元素，又称：分组选择器

所谓并集就是或者的含义（通俗理解：要么…要么…）

• 语法：选择器1,选择器2,选择器3, … 选择器n {}

多个选择器通过,连接，此处,的含义就是：或

• 举例：

  p.paragraph,
ul {
  background-color: green;
  font-size: 40px;
  color: aliceblue;
}

• 注意：
  • 并集选择器，我们一般竖着写
  • 任何形式的选择器，都可以作为并集选择器的一部分
  • 并集选择器，通常用于集体声明，可以缩小样式表体积

后代选择器

• 作用：选中指定元素中，符合要求的后代元素
• 语法：选择器1 选择器2 选择器3 … 选择器n {} （先写祖先，再写后代）

选择器之间，哟个空格隔开，空格可以理解为：“xxx中的” ，其实就是后代的意思

选择器 1234…n ，可以是之前学的任何一种选择器

• 举例：

 div ul li {
  color: blueviolet;
}

.label-class ul li {
  font-size: 20px;
}

#label-id ul li {
  background-color: bisque;
}

• 注意
  • 后代选择器，最终选择的是后代，不选中祖先
  • 儿子、孙子、重孙子，都算是后代
  • 结构一定要符合之前讲的HTML嵌套要求，例如，不能在p标签中写h1~h6

子代选择器

• 作用：选中指定元素中，符合要求的子元素（儿子元素）（先写父，再写子）

子代选择器又称：子元素选择器、子选择器

• 语法：选择器1>选择器2>选择器3> … 选择器n {}

选择器之间，用>隔开，>可以理解为：“xxx的子代”，其实就是儿子的意思

选择器1234…n，可以是之前学的任何一种选择器

• 举例：

        a>h2 {
  color: red;
}
ul>li {
  color: blueviolet;
  font-size: 20px;
}
.list>li {
  color: violet;
  font-size: 30px;
}
#list2>li {
  color: yellowgreen;
  font-size: 30px;
}

• 注意：
  • 子代选择器，最终选择的是子代，不是父级
  • 子、孙子、重孙子、重重孙子…统称为后代，子就是指儿子

兄弟选择器

• 相邻兄弟选择器：
  • 作用：选中指定元素后，符合条件的相邻兄弟元素

  • 所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟

  • 语法：选择器1+选择器2 {}
  • 示例：

  .list1 li+li {
  color: brown;
}
.list2 li+li {
  color: cadetblue;
}

• 通用兄弟选择器
  • 作用：选中指定元素后，符合条件的所有兄弟元素（简记：睡在我下铺的所有兄弟）
  • 语法：选择器1~选择器2 {}
  • 示例：

  h1~ul {
  font-size: 20px;
}

• 注意：两种兄弟选择器，选择的是下面的兄弟

属性选择器

• 作用：选中属性值符合一定要求的元素
• 语法：
  • [属性名] 选中具有某个属性的元素
  • [属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素
  • [属性名^=”值“] 选中包含的某个属性，且属性值以指定的值开头的元素
  • [属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素
  • [属性名*=“值”] 选中包含某个属性，属性值包含指定值的元素
• 举例：

  [title] {
  color: aliceblue;
  font-size: 50px;
  background-color: black;
}

[title = "two-title"] {
  color: violet;
  font-size: 40px;
}

[title^="three"] {
  color: chocolate;
  font-size: 30px;
}

[title$="end"] {
  color: cadetblue;
  font-size: 20px;
}

[title*="five"] {
  color: greenyellow;
  font-size: 10px;
}

---

伪类选择器

• 作用：选中特殊状态的元素

如何理解 ”伪“ ？ —— 虚假的，不是真的

如何理解 “伪类” ？ —— 像类（class），但不是类，是元素的一种特殊状态

动态伪类

• :link 超链接未被访问的状态
• :visited 超链接访问过的状态
• :hover 鼠标悬停在元素上的状态
• :active 元素激活的状态

什么是激活？ ——按下鼠标不松开

注意点：遵循 LVHA 的顺序，即：link、visited、hover、active

• :focus 获取焦点的元素

表单类元素才能使用 :focus 伪类

当用户：点击元素、触摸元素、或通过键盘的 “tab” 键等方式，选择元素时，就是获得焦点

结构伪类

• 常用的：
  • :first-child 所有兄弟元素中的第一个
  • :last-child 所有兄弟元素中的最后一个
  • :nth-child(n) 所有兄弟元素中的第n个
  • :first-of-type 所有同类型兄弟元素中的第一个
  • :last-of-type 所有同类型兄弟元素中的最后一个
  • nth-of-type(n) 所有同类型兄弟元素中的第n个
• 了解：
  • :nth-last-child(n) 所有兄弟元素中的倒数第n个
  • :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
  • :only-child 选择没有兄弟的元素（独生子女）
  • :only-of-type 选择没有同类型兄弟的元素
  • :root 根元素
  • :empty 内容为空元素

关于n的值：

0 或 不写：什么都不选中 —— 几乎不用

n：选中所有子元素 —— 几乎不用

1~正无穷的整合 ：选中对应序号的子元素

2n 或 even：选中序号为偶数的子元素

2n+1 或 odd：选中序号为奇数的子元素

-n+3：选中前3个

否定伪类

• :not(选择器) 排除满足括号中条件的元素

UI伪类

• :checked 被选中的复选框或单选按钮
• :enable 可用的表单元素 （没有disabled属性）
• :disabled 不可用的表单元素 （右disabled属性）

目标伪类

• :target 选中锚点指向的元素

语言伪类

• :lang() 根据指定的语言选择元素（本质是看lang属性的值）

伪元素选择器

• 作用：选中元素中的一些特殊位置
• 常用伪元素：
  • ::first-letter 选中元素中的第一个文字
  • ::first-line 选中元素中的第一行文字
  • ::selection 选中被鼠标选中的内容
  • ::placeholder 选中输入框的提示文字
  • ::before 在元素最开始的位置，创建一个子元素（必须用content属性指定内容）
  • ::after 在元素最后的位置，创建一个子元素（必须用content属性指定内容）