2. css 选择器 & 样式权重

日期: 2020-10-03

1. CSS 选择器分类

1. 通配符 *
2. 标签选择器
3. 类、伪类选择器
4. id 选择器
5. 派生选择器

1. * : 匹配 HTML 中所有的元素

* 的性能差, 因为他要匹配所有的元素, 所以开发时, 不建议使用

通配符 * , 匹配HTML 中所有的元素

2. 标签选择器: 用来匹配对应的标签

html 的标签都可以作为 选择器

 p   {
font-size:16px;
color:green;
}

3. 类选择器: 用来选择 class 命名的标签

class 名称前加 点号 .

.wrapper {
color: red;
}

this is a division
 this is  a paragraph

4. ID 选择器: 用来选择 id 命名的标签

id 是唯一的,只能给定义一个, id 名称前加 #

#content {
color :  grey;
}

this is a span

5. 派生选择器: 根据上下文确定要选择的标签

层级之间用空格 或者大于号 ( > )隔开

.box2  li  {
color: yellowgreen;
}






1.1
1.2
1.3
1.4



2.1
2.2
2.3
2.4
examle 1 
examle 2 

6. 伪类选择器 （后面讲）

:hover

---

2. 选择器分组

1. 让多个选择器（元素）具有相同的样式，一般用于设置公共样式。
2. 被分组的选择器可以分享相同的声明，用逗号 （,） 将需要分组的选择器分开。

h1, p,  .box1, .box2 { color: blue;}

---

3. 选择器继承

子元素可以继承父元素的样式，反之不可以。

---

4. 样式权重

如果外部样式，内部样式，内联样式 同时应用于同一个元素， 就是使用多重样式的情况， 这种情况下的优先级一般情况是 内联样式 > 内部样式 > 外部样式

!important(10000) > 内联样式（1000） > id 选择器 （100）> l类、 伪类选择器 （10） > 标签选择器 ( 1 )

 
        

                52
                
 this is a  h2 title 
        

这是一个 派生选择器，设置的是 h2 的属性，所以 h2 会被高权重的 设置为红色， 52 不会被设置