# 1、css选择器
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说,就是选择标签用的。
- 基础选择器:标签选择器、类选择器、id 选择器和通配符选择器
- 复合选择器:后代选择器、子选择器、并集选择器、伪类选择器
- CSS3新增选择器:属性选择器、伪元素选择器、结构伪类选择器
# 2、css基础选择器
基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器
# 2.1 标签选择器:
标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。
div{
属性:属性值
...
}
1
2
3
4
2
3
4
作用: 标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。
# 2.2 类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器.
.类名 {
color: red;
}
<div class="类名"> 变红色 </div>
1
2
3
4
2
3
4
多类名选择器:
<div class="red font20">亚瑟</div>
1
注意:
- 在标签class 属性中写 多个类名
- 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式
# 2.3 id选择器:
#id名 {
属性1: 属性值1;
...
}
1
2
3
4
2
3
4
注意:id 属性只能在每个 HTML 文档中出现一次。(在 HTML 4.01 中 id 值不能以数字开头)
id选择器和类选择器的区别:
- 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
- id 选择器好比人的身份证号码,不得重复。
# 2.4 通配符选择器
* {
margin: 0;
padding: 0;
}
1
2
3
4
2
3
4
# 3、css的复合选择器
- 在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签) 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
# 3.1 后代选择器 (⭐)
.box span{ color = pink;}
元素1 元素2{ color = pink;}
ul li {
/*选择ul里的所有li*/
color = pink;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
上述语法表示选择父元素为.box
的所有span
元素 (后代元素)。
语法说明:
- 元素1 和 元素2 中间用空格隔开
- 元素1 是父级,元素2 是子级,最终选择的是元素2
- 元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可
- 元素1 和 元素2 可以是任意基础选择器
# 3.2 子选择器 (⭐)
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。(简单理解就是选亲儿子元素)
元素1 > 元素2{/*样式声明*/}
div > p{/*样式声明*/}
1
2
3
2
3
上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。
语法说明:
- 元素1 和 元素2 中间用 大于号 隔开
- 元素1 是父级,元素2 是子级,最终选择的是元素2
- 元素2 必须是亲儿子,其孙子、重孙之类都不归他管。你也可以叫他 亲儿子选择器。
# 3.3 并集选择器 (⭐)
并集选择器可以选择多组标签,,同时为他们定义相同的样式,通常用于集体声明。
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
表示选择元素1 和 元素2。
元素1,元素2{/*样式声明*/}
ul,div{/*选择所有ul和div*/}
1
2
3
2
3
语法说明:
- 元素1 和 元素2 中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
# 3.4 伪类选择器
:link :选择未被访问的链接
:visited:选取已被访问的链接
:active:选择活动链接
:hover :鼠标指针浮动在上面的元素
:focus :选择具有焦点的
:first-child:父元素的首个子元素
1
2
3
4
5
6
2
3
4
5
6
a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接
1
2
3
4
2
3
4
链接伪类选择器注意事项:
为了确保生效,请按照 LVHA 的循顺序声明
:link-:visited-:hover-:active
。记忆法:love hate 或者 lv 包包 hao 。