前言
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权重(很重要)
上述的几种基础选择器,如果同时出现,将会出现不同的优先级,这些优先级与这些选择器的权重有关,请看下面的表格
名 | 权重 |
---|---|
!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:若有错误,欢迎指出