CSS选择器

CSS基本语法

• 选择器 + 声明块
  • 选择器 - 通过CSS选择器选中页面中的指定元素，下面会重点写。

  • 声明块 - 选择器后面跟着的是声明块，使用{}括起来，由一个个声明组成，声明由名值对组成，每一个声明使用；结尾。

    常用选择器

1.元素选择器

语法：标签名{}
eg：p{} //为所有的p元素设置样式。

2.ID选择器

语法：#id{} //id值唯一，不能重复
ed: #box{} //为id为box的元素设置样式。

3.类选择器

语法：.class{}
eg： .box{} //为所有的class值为box的元素设置样式。

4.分组选择器（也叫并集选择器）

语法：选择器1，选择器2，选择器N{}
eg: #box1,.box2,p{} //为为id为box1，class为box2和p的元素共同设置样式。

5.交集选择器

语法：选择器1选择器2选择器3{}
eg：p.box1{} //为class值为box1的p元素设置样式，注意id为唯一值，一般id选择器不会存在于交集选择器中（没必要）。

6.后代选择器

语法：选择器1 选择器2{}
eg：p .box{} //选中指定祖先元素p的指定后代.box。

7.子元素选择器

语法：父元素>子元素{}
eg：p>.box{} //选中制定父元素p的制定子元素。box。注意与后代元素选择器的区别

8.伪类选择器

• 伪类可以用来表示一些特殊的状态：
  ：link - 未访问过的超链接。
  ：visited - 已访问过的超链接。
  ：hover - 鼠标移入的元素。
  ：active - 正在点击的元素。
  由于选择器优先级的问题，给超链接a设置伪类时，需要注意他们的顺序，一般的顺序是：
  love hate 记作（爱与恨）,方便记忆
  :link>:visited>:hover>:active

选择器的优先级

为同一个元素设置多个样式时，此时哪个样式生效由选择器的优先级确定：

• 选择器的优先级（权重）：

·	内联样式	id选择器	类和伪类选择器	元素选择器	统配选择器	继承的样式
优先级	1000	100	10	1	0	无

• 当一个选择器中含有多个选择器时，需要将所有的选择器的优先级进行相加，然后再进行比较，优先级高的优先显示，选择器的计算不会超过其最大的数量级（10个id选择器的优先级不能达到1000）
  分组选择器（并集选择器）的优先级单独计算，不会相加。
• 样式后面加！important，该样式获取最高优先级，内联样式不能加！important属性。
• 样式相同的谁在下面执行谁（样式的覆盖）。