5.CSS选择器
5.1CSS选择器的作用
选择器就是根据不同的需求把不同的标签选出来,这就是选择器的作用,简单来说,就是:选择标签用的。
h1 {
color: red;
font-size: 25px;
}
以上 CSS 做了两件事:
- 找到所有的 h1 标签。(选对人)
- 设置这些标签的样式:颜色为红色、字体大小为 25 像素。(做对事)
5.2选择器的分类
在 CSS 中,可以根据选择器的类型把选择器分为:基础选择器
和 复合选择器
,复合选择器是建立在基础选择器之上,对基础选择器进行组合形成的。
- 基础选择器是由
单个
选择器组成的 - 基础选择器又包括:
标签选择器
、类选择器
、id 选择器
、通配符选择器
- 复合选择器可以更准确、更高效的选择目标元素(标签)
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
- 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等
5.3标签选择器
标签选择器
(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。
语法:
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
作用:
标签选择器可以把某一类标签全部选择出来,比如所有的 <div>
标签和所有的 <span>
标签。
优点:
能快速为页面中同类型的标签统一设置样式。
缺点:
不能设计差异化样式,只能选择全部的当前标签。
5.4类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用 类选择器
。
CSS 语法:
.类名 {
属性1: 属性值1;
...
}
例如:将所有拥有 red 类的 HTML 元素均设置为红色。
.red {
color: red;
}
HTML 语法:
<div class="red">变红色</div>
类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个 .
号显示。
注意:
- 类选择器使用
.
(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的) - 可以理解为给这个标签起了一个别名来表示
- 长名称或词组可以使用中横线
-
来为类命名 - 不能使用已有的关键字作为类名
- 不要使用纯数字、中文等命名,尽量使用英文字母来表示
- 命名要有意义,尽量使别人一眼就知道这个类名的目的(可读性第一,长度第二,推荐使用英语,如果是使用拼音请使用全拼)
- 命名规范:见附件(Web前端开发规范手册.pdf)
类选择器——多类名
我们可以给一个标签指定多个类名,从而达到更多的选择目的,这些类名都可以选出这个标签,简单理解就是一个标签有多个名字。
- 在标签 class 属性中写多个类名
- 多个类名中间必须用
空格
分开 - 这个标签就可以分别具有这些类名的样式
<style type="text/css">
/* 一个标签可以运用多个类选择器,之间用空格隔开 */
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
<div class="red font35">dselegent</div>
多类名开发中使用场景
- 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
- 这些标签都可以调用这个公共的类,然后再调用自己独有的类
- 从而节省 CSS 代码,统一修改也非常方便(模块化、可重用化)
<style type="text/css">
/* 类选择器最大的优势在于:复用 */
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
多类名选择器在后期布局比较复杂的情况下,是使用得较多的。
5.5id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 #
来定义。
语法:
#id名 {
属性1: 属性值1;
...
}
**例如:**将 id 为 nav 元素中的内容设置为红色。
#nav {
color: red;
}
**注意:**id 属性只能在每个 HTML 文档中出现一次。
**口诀:**样式 #
定义,结构 id
调用,只能调用一次,别人切勿使用。
id 选择器和类选择器的区别:
- 类选择器 (class) 好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用
- id 选择器好比人的身份证号码,全中国是唯一的,不可重复(同一个 id 选择器只能调用一次)
- id 选择器和类选择器最大的不同在于使用次数上
- 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用
<style type="text/css">
#pink {
color: pink;
}
</style>
<div id="pink">dselegent</div>
再次强调:同一 id 只能定义一次,同一 id 选择器也只能调用一次!(对于 CSS 修改样式来说,最好使用类选择器,id 选择器主要与后面的 JS 搭配使用)。
5.6通配符选择器
在 CSS 中,通配符选择器使用 *
定义,它表示选取页面中所有元素(标签)。
语法:
* {
属性1: 属性值1;
...
}
- 通配符选择器不需要调用,自动就给所有的元素使用样式
- 特殊情况才使用,后面讲解使用场景
* {
margin: 0;
padding: 0;
}
5.7基础选择器总结
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如:p | 不能差异化选择 | 较多 | p {color: red;} |
类选择器 | 可以选出 1 个或者 多个 标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
id 选择器 | 一次只能选择 1 个标签 | ID 属性只能在每个 HTML 文档中出现一次,也只能调用一次 | 一般和 js 搭配 | #nav {color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 特殊情况使用 | * {color: red;} |
- 每个基础选择器都有使用场景,都需要掌握
- 如果是修改样式,类选择器是使用最多的
5.8关系选择器
-
父元素:直接包含子元素的元素叫做父元素
-
子元素:直接被父元素包含的元素是子元素
-
祖先元素:直接或间接包含后代元素的元素叫做祖先元素;一个元素的父元素也是它的祖先元素
-
后代元素:直接或间接被祖先元素包含的元素叫做后代元素;子元素也是后代元素
-
兄弟元素:拥有相同父元素的元素是兄弟元素
5.8.1后代选择器
后代选择器
又称为 包含选择器
,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
元素1 元素2 {
样式声明 }
上述语法表示选择 元素 1 里面的所有元素 2 (后代元素)。
例如:
ul li {
样式声明 } /* 选择 ul 里面所有的 li 标签元素 */
- 元素1 和 元素2 中间用 空格 隔开
- 元素1 是父级,元素2 是子级,最终选择的是 元素2,即:元素1 是不会生效样式的
- 元素2 可以是儿子,也可以是孙子等,只要是 元素1 的后代即可
- 元素1 和 元素2 可以是任意基础选择器
<style>
/* 把 ol 里面的小 li 选出来改为 pink */
ol li {
color: pink;
}
/* 把 ol 里面的小 a 选出来改为 red */
ol a {
color: red;
}
/* 把 ul 里面的小 li 选出来改为 green */
ul li {
color: green;
}
/* 把 nav 类中的 li 里面的 a 选出来改为 yellow */
.nav li a {
color: yellow;
}
</style>
<ol>
<li>我是 ol 的孩子</li>
<li>我是 ol 的孩子</li>
<li>我是 ol 的孩子</li>
<li><a href="#">我是 ol 的孙子</a></li>
</ol>
<ul>
<li>我是 ul 的孩子</li>
<li>我是 ul 的孩子</li>
<li>我是 ul 的孩子</li>
<li><a href=