HTML/CSS初学 学习笔记1：CSS基础选择器与复杂选择器、权重以及权重计算问题（不会权重计算，你敢说自己会CSS？）

前言

CSS选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。

基础选择器

标签选择器

什么是标签选择器？

• 根据指定标签名称，在当前界面中找到所有该名称的标签，并设置属性

注意点

• 标签选择器选中的是当前界面所有同名标签，不能单独选中
• 只要是HTML中的标签都可以作为标签选择器

语法格式 标签名{}

div {
   background-color: #F40;
}

id选择器

什么是id选择器？

• id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

注意点

• HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
• 每个HTML标签都有id属性
• 同一个界面中id是唯一的，不能重复
• 编写id选择器必须要在id前面加上一个#号
• id的名称有一定的规范，只能由字母数字和下划线组成
• id的名称不能够以数字开头
• id的名称不能与HTML标签同名
• 如果仅仅是为了设置样式，我们不会使用id，因为前段开发中id是留给js使用的

语法格式 #id名{}

以下的样式规则应用于元素属性 id=“demo”:

<div id="demo"></div>
#demo {
    background-color: #F40;
}

calss选择器（最常用的选择器）

什么是class选择器？

• class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

注意点

• 每个HTML标签都有class属性
• 同一个界面中class属性是可以重复
• 编写class选择器必须要在class名称前面加上一个.号
• class的名称有一定的规范，只能由字母数字和下划线组成
• class的名称不能够以数字开头
• class的名称不能与HTML标签同名
• class就是专门给某一类标签设置样式的
• 一个标签可以同时绑定多个class属性，class之间用空格隔开
• 也可以指定特定的HTML元素使用class

语法格式 .class

.demo1 {background-color: #F40;}

.demo2 {color : #000;}

p.center {text-align:center;}/*特定的元素使用class*/

<div calss="demo1 demo2"></div>
/* 一个标签用两个class,之间用空格隔开 */

<div calss="demo1" id="div1"></div>
<div calss="demo1" id="div2"></div>
/* 一个class可以被多个标签同时使用 */

属性选择器

CSS属性选择器即是通过html的属性来选择元素
如下代码

[id] {
    background-color: green;
}
<div id="demo1">123</div>
<div id="demo2">456</div>

给属性选择器的属性添加属性值

[id="demo1"] {
    background-color: green;
}
<div id="demo1">123</div>
<div id="demo2">456</div>

只有id 的属性值为demo1的标签才会变成绿色

通配符选择器

语法格式 *{}

*是任意的意思，此处是 all，所有的标签（包括和）

* {
    background-color: #F40;
}/* 整个页面的背景颜色均改变 */

!important

!important，作用是提高指定样式规则的应用优先权（优先级）。

语法格式{ cssRule !important }，即写在定义的最后面，例如：.box{color:red !important;}。

---

CSS权重（很重要）

上述的几种基础选择器，如果同时出现，将会出现不同的优先级，这些优先级与这些选择器的权重有关，请看下面的表格

CSS权重

名	权重
！important	infinity 正无穷
行间样式	1000
id 选择器	100
class 选择器、属性选择器、伪类选择器	10
标签选择器、伪元素选择器	1
通配符选择器	0

注意

• 在计算机中，正无穷+1>正无穷
• 如果权重值一样（优先级一样），会显示后面的。就是先来后到，谁在后面，谁（后面的）覆盖前面的——后面的会覆盖前面的
• 在权重中，是 256 进制，是从 0 到 255 后变成 1。所以这里的 1000 不是一千，100 不是一百

复杂选择器

父子选择器（派生选择器）

语法格式
最外面的结构 外面的结构 里面的结构{} 就是一个父子结构

注意：

• 父子选择器中，每一个层级，都不一定要是标签选择器，写 class
  选择器也行，重要的是表达出来父子关系。而且这种父子关系有可能是间接地，也有可能是直接的

/* 直接父子关系 */
div span {
    background-color: red;
}
<div>
	<span>123</span>
</div>
<span>234</span>

/* 间接父子关系 */
div em{
    background-color: red;
}
<div>
	<strong>
		<em>123</em>
	</strong>
</div>

/* 直接子元素选择 */
div>em {
    background-color: red;
}
<div>
	<em>1</em>
	<strong>
		<em>2</em>
	</strong>
</div>

来思考个问题（问题来源，腾讯课堂《2020权威HTML+CSS零基础入学》）

看下面思考：浏览器是从右向左，还是从左向右找？

浏览器遍历的时候是从右向左找的(先看 em,再看 a,再看 li,再看 ul,再看 div)，更快更有效率

并列选择器

先来看一个问题

<div>1</div>
<div class="demo">2</div>
<span class="demo">3</span>
/* 要让2的背景颜色为红色，如何做到？ */
/* 1.给第二个div添加id，然后使用id选择器 */
/* 2.或者需要一个选择器，叫并列选择器 */

div.demo {
    background-color: red;
}

并列选择器的语法格式
div.demo 在.之前不用写空格

/* 要选择em标签 有哪些方法*/
<div calss="wrapper">
	<div class="content">
		<em class="box" id="only">1</em>
	</div>
</div>
<em></em>
/* 以下几种均可以做到，当然有的很复杂了 还有其他的方式也能选中em的 */

#only {
    background-color: red;
}

.content em {
    background-color: green;
}

.wrapper > .content >.box{
    background-color: gray;
}

div.wrapper > div[class = "content"] > div#only.box{
    
}

注意

• 在并列选择器中，标签选择器和 id 选择器和 class 选择器在一起，标签选择器必须放前面

来个问题

<div class="classDiv" id="idDiv">
	<p class="classP" id="idP">1</p>
</div>
/* 显式什么颜色 */
#idDiv .classP {
    background-color: red;
}

.classDiv .classP {
    background-color: green;
}

答案是显式红色
这里涉及了权重的计算问题
这些标签出现在同一行，就是比较其相加之后的权重大小
第一个选择器的 权重和 = 100 + 1（256进制）
第二个的 权重和 = 10 + 10

/*100     10*/
#idDiv .classP.classP {
    background-color: red;
}
/*1   10    100*/
div .classP#idP {
    background-color: green;
}
/* 最终显式绿色 */

/*1   10    100*/
div .classP#idP {
    background-color: green;
}
/*100   1    10*/
#idDiv p.classP {
    background-color: red;
}
/*权重相等时，谁在后面，谁覆盖在最上层，显式什么颜色*/

分组选择器

<div>1</div>
<span>2</span>
<em>3</em>
/* 要让这三个数字的背景颜色均变为红色 */

/* 可用如下的方法 */
div {
    background-color: red;
}

span {
    background-color: red;
}

em {
    background-color: red;
}

/* 但是这个方法的代码冗余太多了，所以介绍一个分组选择器 */
div,
span,
em {
    background-color: red;
}

注意

• 可以写成一行，但是开发中一般都竖着写，方便看

Ps：若有错误，欢迎指出