CSS选择器和三大特性

---

一、CSS选择器

1.标签选择器

作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式:

标签名称 {
    属性:值;
​}
*****************************
body {
  background-color: #fff;
}

标签选择器需要注意的是：

• 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
• 标签选择器无论标签藏得多深都能选中
• 只要是HTML中的标签就可以作为标签选择器比如(h/a/img/ul/ol/dl/input…)

2.id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性
格式:

#id名称{
​   属性:值;
}
*************************
#wrapper {
  margin: 0 auto;
  width: 1200px;
}

id选择器需要注意的是：

• 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
• 在同一个界面中id的名称是不可以重复的
• 在编写id选择器时一定要在id名称前面加上#
• id的名称是有一定的规范的
  id的名称只能由字母/数字/下划线，a-z 0-9 _
  id名称不能以数字开头
  id名称不能是HTML标签的名称，不能是a h1 img input …
• 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的

3.类选择器

作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式:

.类名{
​  属性:值;
}
************************
.header {
  height: 100px;
  background-color: #fff;
}

类选择器需要注意的是：

• 每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
• 在同一个界面中class的名称是可以重复的
• 在编写class选择器时一定要在class名称前面加上
• 类名的命名规范和id名称的命名规范一样
• 类名就是专门用来给CSS设置样式的
• 在HTML中每个标签可以同时绑定多个类名

格式如下:

<标签名称 class="类名1 类名2 ...">
*********************************
<div class="user1 user2...">

​ 错误的写法:

  <p class="para1" class="para2">  此写法错误

在企业开发中选择类（class）选择器，id选择器一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式.

4.后代选择器

作用: 找到指定标签的所有特定的后代标签设置属性
格式:

标签名称1 标签名称2{
​         属性:值;
}
********************
.logo a {
  display: block;
  width: 195px;
  height: 40px;
  先找到所有类称叫做"logo"的标签, 
  然后再在这个标签下面去查找所有名称叫做"a"的标签, 
  然后在设置属性

注意点:

• 后代选择器必须用空格隔开
• 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
• 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
• ​后代选择器可以通过空格一直延续下去

5.子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

.logo > .center {
  width: 540px;
  height: 70px;
  margin: 0px 40px 0 130px;
  /* background-color: red; */
}

注意点:

• 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签

• 子元素选择器之间需要用>符号连接, 并且不能有空格

• 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器

• 子元素选择器可以通过>符号一直延续下去

6.交并集选择器

作用：交集给所有选择器选中的标签中, 相交的那部分标签设置属性
并集给所有选择器选中的标签设置属性

/* 交集 */
    p.p2 {
      background-color: yellow;
    }

    /* 并集 */
    div,
    .p2,
    #last {
      font-size: 18px;
      color: red;
    }

7.兄弟选择器（css3）

作用：给指定选择器后面的所有选择器选中的所有标签设置属性

/* css3 除了自身外其他兄弟标签*/
    .one~div {
      background-color: red;
    }

8.序选择器（结构伪类选择器）

CSS3中新增的选择器最具代表性的就是序选择器
​ 1.同级别中的第几个
​ :first-child 选中同级别中的第一个标签
​ :last-child 选中同级别中的最后一个标签
​ :nth-child(n) 选中同级别中的第n个标签
​ :nth-child(odd) 选中同级别中的所有奇数（2n+1）
​ :nth-child(even) 选中同级别中的所有偶数（2n）
​ :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

​ 例如(3n+1)分别对应1,4,7…
​ :nth-last-child(n) 选中同级别中的倒数第n个标签
​ :only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效
​ 注意点: 不区分类型
​
​ 2.同级别同类型中的第几个
​ :first-of-type 选中同级别中同类型的第一个标签
​ :last-of-type 选中同级别中同类型的最后一个标签
​ :nth-of-type(n) 选中同级别中同类型的第n个标签
​ :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
​ :only-of-type 选中父元素的特定类型的唯一子元素

二、CSS三大特性

1.继承性

给父元素设置一些属性 后代元素可以继承
通常可以继承属性color/text-/line-/font-/letter-spacing/word-spacing
注意：h1标签作为子元素不会继承父元素字体大小 font-size 会参考自身字体大小
a标签作为子元素不会继承字体颜色color 也不会继承去除下划线text-decoration:none

2.层叠性

使用不同选择器给同一个标签设置样式

3.优先级

当给同一个标签使用不同选择器设置相同样式
内联样式>内部样式/外部样式(就近原则)
优先级权重:
!important不计入权重计算 优先级最高
style 1000
id选择器 100
类选择器 伪类选择器 属性选择器 10
标签选择器 伪元素选择器 1
通配符选择器 没有权重 优先级最低

---

总结

以上说明了css的各种选择器，并说明了其作用及其注意事项，灵活运用选择器可以让我们很快速的匹配dom元素，从而很大程度上提升开发效率，提升代码质量，增强我们的编程思维等。除此之外还介绍了CSS的三大特性，继承、层叠和优先级。