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;
}

<div class="wrapper">this is a division</div>
<p class="wrapper"> this is  a paragraph</p>

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

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

#content {
color :  grey;
}

<span id="content">this is a span</span>

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

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

.box2  li  {
color: yellowgreen;
}





<ul class="box1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<li>1.4</li>
</ul>

<ul class="box2">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
<ul><li>examle 1 <li><li>examle 2 <li></ul>
</ul>

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

:hover

---

2. 选择器分组

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

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

---

3. 选择器继承

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

---

4. 样式权重

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

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

<style>

/*  权重计算： 100 + 1 + 10 + 1 = 112 */
#content  div.main_content  h2 {
color: red;    
}

/*  权重计算： 100 + 10 + 1 = 111 */
#content  .main_content  h2 {
color: blue;    
}

</style>


<div id="content" > 
        <div class="main_content" >
                52
                <h2> this is a  h2 title </h2>
        </div>

</div>

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