CSS选择器
1.选择器的作用
找到特定的HTML页面元素
CSS选择器是用来选择标签用的,把我们想要的标签选择出来
2.CSS基础选择器
2.1 标签选择器
-
概念:
标签选择器(元素选择器)是指用HTML标签名作为选择器,按标签名分类,为页面中某一类标签指定统一的CSS样式。
-
语法:
标签名 { 属性1: 属性值1; 属性2: 属性值2; }
-
作用:
标签选择器可以把某一类标签全部选择出来
-
优点:
是能快速为页面中同类型的标签统一样式
-
缺点:
不能设计差异化样式
总结口诀:
标签选择器,
页面同选起,
直接写标签,
全部不放弃。
2.2 类选择器
类选择器使用"." (英文点号)进行标识,后面紧跟类名
-
语法:
- 类名选择器
.类名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }- 标签
<p class="类名"></p> -
优点:
- 可以为元素对象定义单独或相同的样式
- 可以选择一个或多个标签
-
注意:
- 类选择器使用"."进行标识,后面紧跟类名(自定义)
- 长名称或词组可以使用中横线来为选择器命名
- 不要纯数字、中文等命名,尽量使用英文字母来表示
命名时约定俗称的,但是没有规定必须用这些常用的命名
记忆口诀
差异化选择
一个或多个
上面点定义
类名别写错
谁用谁调用
class来做。嘿嘿，工作类最多。
-
可以给标签指定多个类名,从而达到更多的选择目的。
- 多个类名中间用空格隔开
- 多类名选择器在后期布局比较复杂的情况下,还是较多使用的
2.3 id选择器
id选择器使用#进行标识,后面紧跟id名
-
语法:
-
id选择器
#id名 {属性1: 属性值1; 属性2: 属性值2;} -
标签
<p id="id名"></p>
-
-
元素的id值是唯一的,只能对应于文档中某一个具体的元素
-
用法基本和类选择器相同
-
id选择器和类选择器区别:
- W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
- 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
- id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
- W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
-
id选择器和类选择器最大的不同在于使用次数上
- 类选择器我们在修改样式中用的最多
- id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用
2.4 通配符选择器
-
概念:
通配符选择器用*号表示, * 就是选择所有标签,它是所有选择器中作用范围最广的,能匹配页面中所有的元素
-
语法:
* { 属性1: 属性值1; 属性2: 属性值2; }如下代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距
* { margin: 0; padding: 0; } -
注意:
会匹配页面所有的元素,降低页面响应速度,不建议随便使用
2.5 基础选择器总结
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
2.6 团队约定
选择器
- 尽量少用通配符选择器
- 尽量少用id选择器
- 不使用无具体语义定义的标签选择器div span
/* 推荐 */
.jdc {}
li {}
p{}
/* 不推荐 */
*{}
#jdc {}
div{} 因为div 没有语义，我们尽量少用
3. 复合选择器
3.1 后代选择器
-
概念:
后代选择器又称为包含选择器
-
作用:
用来选择元素或元素组的子孙后代
-
其写法就是把外层标签写在前面,内层标签写在后面, 中间用空格分隔,先写父亲爷爷,再写儿子孙子。
父级 子级 { 属性1: 属性值1; 属性2: 属性值2; } -
语法:
.class h3 { color: red; font-size: 16px; }- 当标签发生嵌套时,内层标签成为外层标签的后代
- 子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签
3.2 子元素选择器
-
作用:
子元素选择器只能选择作为某元素的子元素(亲儿子/父标签最近的子标签)的元素
-
其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接
-
语法:
.class > h3 { color: red;font-size: 14px; } -
重点:
这里的子指的是亲儿子,不包括孙子或重孙子之类
白话：
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
3.3 交集选择器
-
条件:
交集选择器由两个选择器构成,找到的标签必须满足: 既有标签一的特点,也有标签而的特点。
jiaoji.png
-
语法:
h3.class { color: red; font-size: 25px; }- 其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special
-
记忆技巧:
交集选择器是并且的意思, 即...又...的意思
比如: p.one 选择的是: 类名为 .one 的段落标签用的相对来说比较少,不太建议使用
3.4 并集选择器
-
应用:
- 如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简介
-
并集选择器(CSS选择器分组)是各个选择器通过连接而成的,通常用于集体声明
-
语法:
.class, h3 { color: red; font-size: 25px; } -
任何形式的选择器(包括标签选择器、class类选择器以及id选择器),都可以作为并集选择器的一部分
-
记忆技巧:
并集选择器通常用于集体声明,逗号隔开,所有选择器都会执行后面样式,逗号可以理解为和的意思
比如 .one, p, #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色 通常用于集体声明
3.5 链接伪类选择器
-
与类选择器的区别:
为了和我们刚才学的类选择器相区别,类选择器是一个点比如.demo {}, 而我们的伪类用冒号(比如: :link{})
-
作用:
- 用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第n个元素
- 因为伪类选择器很多,比如链接伪类,结构伪类等等
a:link {} /* 未访问的链接 */
a:visited {} /* 已访问的链接 */
a:hover {} /* 鼠标移动到链接上 */
a:active {} /* 选定的链接 */
注意:
1.写的时候,他们的顺序尽量不要颠倒,按照lvha的顺序,否则可能引起错误
2.记忆法:
- love hate 爱上了讨厌
- lv 包包 非常hao
3.因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover
4.因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
5.实际工作开发中，我们很少写全四个状态，一般我们写法如下：
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
3.6 复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
4. 属性选择器
4.1 属性选择器列表
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att="val"] | 选择具有att属性且属性值等于val的E元素 |
| E[att^="val"] | 匹配具有att属性、且值以val开头的E元素 |
| E[att$="val"] | 匹配具有att属性、且值以val结尾的E元素 |
| E[att*="val"] | 匹配具有att属性、且值中含有val的E元素 |
属性选择器代码演示:
button {
cursor: pointer;
}
/* E[att] */
button[disabled] {
cursor: default;
}
/* E[att="val"] */
input[type="text"] {
color: red;
}
/* E[att^="val"] */
span[class^="icon"] {
color: pink
}
/* E[att$="val"] */
span[class$="icon"] {
color: purple;
}
/* E[att*="val"] */
span[class*="icon"] {
color: blue;
}
5.结构伪类选择器
5.1 属性列表
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个元素 |
| E:last-of-type | 指定类型E的最后一个元素 |
| E:nth-of-type(n) | 指定类型E的第n个元素 |
-
nth-child参数详解:
-
注意: 本质上就是选中第几个子元素
-
n可以是数字、关键字、公式
-
n如果是数字,就是选中第几个
-
常见的关键字: even 偶数、odd奇数
-
常见的公式如下(如果n是公式,则从0开始计算)
-
但是第0个元素或者超出了元素的个数则会被忽略
公式 取值 2n 偶数 2n + 1 奇数 5n 5 10 15 ... n + 5 从第5个开始(包含第五个)到最后 -n + 5 前5个(包含第5个)
-
-
nth-child 和 nth-of-type的区别
- nth-child 选择父元素里面的第几个子元素,不管当前子元素的类型
- nth-of-type 选择指定类型的元素
5.2 代码演示
ul li:first-child {
background-color: blue;
}
ul li:last-child {
background-color: green;
}
ul li:nth-child(3) {
background-color: purple;
}
/* 偶数 */
ul li:nth-child(even) {
background-color: blue;
}
/* 奇数 */
ul li:nth-child(odd) {
background: #0094ff;
}
/* n是公式, 从0开始计算 */
/* 2n偶数 */
ul li:nth-child(2n) {
background: #fff;
}
div :nth-child(1) {
background: lightblue;
}
div span:nth-of-type(2) {
background-color: lightseagreen;
}
6.伪类选择器
6.1 伪类选择器
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
6.2 伪类选择器注意事项
- before 和 after 必须有content属性
- before在内容前面,after在内容后面
- before 和 after创建的是一个元素,但是属于行内元素
- 创建出来的元素在Dom中查找不到,所以称为伪元素
- 伪元素和标签选择器一样,权重为1
6.3 代码演示
dic {
width: 100px;
height: 100px;
border: 1px solid lightblue;
}
div::before,
div::after {
width: 20px;
height: 50px;
text-align: center;
content: "哈哈";
}
网友评论