image.png

1.后代选择器（重要）

image.png
如果有多级嵌套关系，则需要一层一层的递进选择，并且也可以使用任意的基础选择器。

  1. <div class="nav">
  2.   <p><a href="#">哈哈</a></p>
  3. </div>
  5. //示例：选择nav类中的p标签中的a标签
  6. .nav p a {
  7.   color: red;
  8. }
//示例：选择ul标签里的li标签
ul li {
  color: red;
}
//示例：选择id为app中的table标签
.app table {
  ...
}

2.子元素选择器（重要）

image.png
与后代选择器不同，后代选择器可以选择任意层级的孩子，包括儿子、孙子、重孙子，但是子元素选择器只会选择直接后代，而不会选择所有后代。而且语法也不同。
示例：选择div中的直接子级p标签

<div>
  <p>我是儿子1</p>
  <p>我是儿子2</p>
  <span>
    <p>我是孙子</p>
  </span>
</div>

div>p {
  color: red;
}

image.png

3.并集选择器（重要）

image.png
并集就是可以同时选择多个类、标签、id，一起设定样式，注意使用逗号（，）隔开，而不是空格。并且并集中可以使用任意形式的选择器，包括后代和子级选择器。
示例：同时选中app类、p和span标签下的a标签

.app,p,span a {
  color: red'
}
不过更推荐写成以下格式：
//约定的语法规范，竖着写更容易看清
.app,
p,
span a {
  color: red;
}

4.伪类选择器

image.png

（1）链接伪类选择器

image.png
其实常用的只有 hover 伪类，实际开发中一般单独修改a标签， 然后再加一个 hover 即可。

a {
  color: gray;
}
a:hover {
  color: red;
}

链接伪类选择器注意事项

  1. 为了确保伪类生效，请按照LVHU的顺序声明，即 link -> visited -> hover -> active
  2. 因为a链接在浏览器中具有默认样式，所以实际工作中需要给a链接标签单独指定样式

举例：只给body样式是无法修改a标签样式的，必须直接给a标签样式才行。

<body>
  <a href="#">链接</a>
</body>

<style>
  body {
    color: red;
  }
</style>

效果：
image.png
必须直接给a标签修改样式才行：

<body>
  <a href="#">链接</a>
</body>

<style>
  a {
    color: red;
  }
</style>

image.png

（2）表单伪类选择器

image.png
即获得光标焦点的input输入框，就是focus伪类选中的对象。