CSS选择器

通用选择器

通用选择器（universal selector）
- 所有的元素都会被选中;
一般用来给所有元素作一些通用性的设置
- 比如内边距、外边距;
- 比如重置一些内容;
效率比较低，尽量不要使用;

简单选择器

简单选择器是开发中用的最多的选择器:
- 元素选择器（type selectors）, 使用元素的名称;
- 类选择器（class selectors）, 使用 .类名 ;
- id选择器（id selectors）, 使用 #id;

** id注意事项 **

一个HTML文档里面的id值是唯一的，不能重复
- id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
- 最好不要用标签名作为id值
中划线又叫连字符（hyphen）

属性选择器(attribute selectors)

拥有某一个属性 [att]
属性等于某个值 [att=val]

其他了解的(不用记)
- [attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;

  <style>
    [title] {
      color: blue;
    }
    [title=box] {
      color: red;
    }
  </style>
</head>
<body>
  
  <div title="box">div元素1</div>
  <div title="box">div元素2</div>
  <div title="">div元素3</div>
</body>

后代选择器（descendant combinator）

后代选择器一: 所有的后代(直接/间接的后代)
- 选择器之间以空格分割
后代选择器二: 直接子代选择器(必须是直接自带)
- 选择器之间以 > 分割;

兄弟选择器(sibling combinator)

兄弟选择器一:相邻兄弟选择器
- 使用符号 + 连接
兄弟选择器二: 普遍兄弟选择器 ~
- 使用符号 ~ 连接

选择器组 – 交集选择器

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)
- 在开发中通常为了精准的选择某一个元素;
并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)
- 在开发中通常为了给多个元素设置相同的样式;

认识伪类

什么是伪类呢?
- Pseudo-classes: 翻译过来是伪类;
- 伪类是选择器的一种，它用于选择处于特定状态的元素;
比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;

伪类(pseudo-classes)

常见的伪类有
1.动态伪类（dynamic pseudo-classes）
- :link、:visited、:hover、:active、:focus
2.目标伪类（target pseudo-classes）
- :target
3.语言伪类（language pseudo-classes）
- :lang( )
4.元素状态伪类（UI element states pseudo-classes）
- :enabled、:disabled、:checked
5.结构伪类（structural pseudo-classes）(后续学习)
- :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-lastof-type( )
- :first-child、:last-child、:first-of-type、:last-of-type
- :root、:only-child、:only-of-type、:empty
6.否定伪类（negation pseudo-classes）(后续学习)
:not()

动态伪类（dynamic pseudo-classes)

使用举例
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标挪动到链接上(重要)
- a:active 激活的链接（鼠标在链接上长按住未松开）
使用注意
- :hover必须放在:link和:visited后面才能完全生效
- :active必须放在:hover后面才能完全生效
- 所以建议的编写顺序是 :link、:visited、:hover、:active
除了a元素，:hover、:active也能用在其他元素上

动态伪类 - :focus

:focus指当前拥有输入焦点的元素（能接收键盘输入）
- 文本输入框一聚焦后，背景就会变红色
因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
动态伪类编写顺序建议为
- :link、:visited、:focus、:hover、:active
直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
- 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

目标伪类的使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :target {
      color: red;
    }
  </style>
</head>
<body>

  <a href="#theme01">主题01</a>
  <a href="#theme02">主题02</a>
  <a href="#theme03">主题03</a>
  
  <h2 id="theme01">主题01</h2>
  <h2 id="theme02">主题02</h2>
  <h2 id="theme03">主题03</h2>

</body>
</html>