前端---css 选择器

1. css 选择器的定义

css 选择器是用来选择标签的，选出来以后给标签加样式。

2. css 选择器的种类

1. 标签选择器
2. 类选择器
3. 层级选择器(后代选择器)
4. id选择器
5. 组选择器
6. 伪类选择器

3. 标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

示例代码

hello
hello

4. 类选择器

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

示例代码

这是一个div
这是一个标题
这是一个段落

5. 层级选择器(后代选择器)

根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。

示例代码

    
hello



    哈哈
    百度
    谷歌

你好
新浪

注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器

6. id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

示例代码

这是一个段落标签
   
这是第二个段落标签
 
这是第三个段落标签
 

注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

7. 组选择器

根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。

示例代码

这是第一个div
这是第二个div
这是第三个div

8. 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

这是第一个div

9. 小结

• css 选择器就是用来选择标签设置样式的
• 常用的 css 选择器有六种，分别是:
  1. 标签选择器
  2. 类选择器
  3. 层级选择器(后代选择器)
  4. id选择器
  5. 组选择器
  6. 伪类选择器