作业
1. class 和 id 的使用场景
- class 可以将一类元素样式抽取出来，复用一些样式 比如两个标签都需要字体是红色
- id是整个页面最好唯一 控制单个元素 样式上给以给予唯一样式
2. css选择器常见的有几种
- 基础选择器
| 基础选择器 | 含义 |
|---|---|
| * | 通配符选择器，匹配页面上的所有元素 (很少使用) |
| #id | id选择器，匹配特定id的元素 |
| .class | 类选择器，匹配class包含特定类的所有元素 |
| element | 标签选择器 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="ct">
<p class="p1"></p>
<p class="p2"></p>
</div>
</body>
<style>
/*通用选择器*/
* {
padding: 0;
margin: 0;
}
/*标签选择器*/
p {
color: red;
}
/* 类选择器*/
.p1 {
color:green;
}
/*id选择器*/
#ct {
color: yellow;
}
</style>
</html>
- 组合选择器
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用都好 ，, 同事匹配元素E 或者 F |
| E F | 后代选择器，使用空格分隔 找到E元素里面所有为F的元素 |
| E>F | E的第一层子元素中的F元素 |
| E+ F | E元素的同级元素中且直接相邻为F的元素 E的下一个为F的 |
| E~F | E元素的同级元素中且所有同级为F的元素 |
| EF | 同时含有EF这两个要素的元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*多元素选择器, 几个元素需要给予同样元素用这个 p1 p2 p3 都需要字体大小为32px*/
.p1, .p2, .p3 {
font-size: 32px;
}
/*子孙（儿子 孙子 曾孙...）元素选择器 p1 下面所有的类为 .test 的元素颜色都为 #DE3*/
.p1 .test {
color: #de3;
}
/*儿子(只有儿子)选择器 是p1儿子的元素都被选中*/
.p1>.test {
color: #1af;
}
/*兄弟（堂弟 表弟 亲弟）选择器 所有同级元素只要是类为.test 的都被选中*/
.content~.test {
color: green;
}
/*亲弟选择器 就是靠着自己最近的弟弟 亲弟*/
.content+.test {
color: red;
}
/*EF选择器 曹操孟德 才是三国时期曹孟德 曹操马克 就不是三国时期曹操了*/
.p3.active {
font-size: 12px
}
div#ct {
background: rgba(222, 123, 44, .3);
}
</style>
</head>
<body>
<div id="ct">
<div class="p1">
<div class="test">
第一层 E>F 只能选择到第一层为F的元素
<div class="test">NO(E>F) 我是第二层类名为Test</div>
</div>
<div class="content"> 我是内容</div>
<div class="test">.content+.test E~F 选中E元素开始 以下为第一个为F的元素</div>
<div class="s"></div>
<div class="test">.content~.test E~F 选中E元素开始 以下为F的元素</div>
<div class="test">.content~.test 选中E元素开始 以下为F的元素</div>
</div>
<p class="p2">p2(.p1, .p2, .p3)</p>
<div class="p3 active">p3(.p1, .p2, .p3 和 .p3.active)</div>
</div>
</body>
</html>
- 属性选择器
| 选择器 | 含义 |
|---|---|
| E[attr] | 匹配所有具有属性attr的元素 |
| E[attr=value] | 匹配属性attr值为value的元素 |
| E[attr~=value] | 匹配属性attr 具有多个空格 其中一个值等于value的元素 |
| E[attr^=value] | 匹配属性attr值以value开头的元素， |
| E[attr$=value] | 匹配属性attr值以value结尾的元素， |
| E[attr*=value] | 匹配属性attr值包含value的元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*有class这个属性*/
.test[class] {
color: red;
}
/*有class这个属性且这个属性的值有test*/
.test[class='test'] {
color: blue;
}
/*有class这个属性且这个值有空格隔离 中有个值为active*/
.test[class~='active'] {
color: #3f4;
}
/*有class这个属性且这个值以footer结尾的元素*/
.test[class$='footer'] {
color: #f2f;
}
/*有class这个属性且这个值以header开头的元素*/
.test[class^='header'] {
color: #2df;
}
</style>
</head>
<body>
<div class="test active">1 </div>
<div class="header test">2 开头</div>
<div class="test">3</div>
<div class="test footer">4 结尾</div>
<div class="test">5</div>
</body>
</html>
- 伪类选择器
比如鼠标放上去是一种状态而不是一个类 这时候就只能使用伪类选择器来改变相关标签的样式
a标签伪类 active visited hover（其他元素也可以有） active
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个元素 |
| E:linlk | 匹配所有没被点击的链接 |
| E:visited | 匹配所有被点击的元素 |
| E:active | 匹配已经在这个元素按下， 还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E：lang(c) | 匹配lang属性等于c的E元素 |
| E: enabled | 匹配表单中可用的元素 |
| E：disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配表单中被选中的radio或checkbox元素 |
| E:selection | 匹配用户当前选中的元素 |
| E:root | 匹配文档的根元素 对于HTML 就是HTML元素 |
| E:nth-child(n) | 匹配他的父元素的第N个子元素，第一个编号是 1 |
| E：nth-last-child | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:nth-of-type(n) | 与：nth-child（）作用类似，但是仅匹配使用同种标签的元素 |
| E:nth-last-of-type(n) | 与：nth-last-child（）作用类似，但是仅匹配使用同种标签的元素 |
| E:last-child | 匹配父元素的最后一个子元素 等同于：nth-last-child（1） |
| E：first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于E:nth-of-type(1) |
| E：last-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于E:nth-last-of-type(1) |
| E:only-child | 匹配父元素下仅有的一个子元素 等同于：first-child：last-child或者nth-child（1）：nth-last-child（1） |
| E:only-child | 匹配父元素下仅有的一个子元素 等同于：first-of-type：last-of-type或者nth-of-type（1）：nth-last-of-type（1） |
注意
of-type 相同标签 -child 没有标签类型限制
n 的取值
1，2，3，4，5
2n+1， 2n， 4n-1
odd even
- 伪元素选择器
没有业务逻辑的需要相关的样式修饰 可以使用伪类选择器
使用标签又比较浪费 破坏结构
| 选择器 | 含义 |
|---|---|
| E:before | 在E元素之前插入元素 |
| E:after | 在E元素之后插入元素 |
| E：first-letter | E元素的第一个字母 |
| E:line | 匹配第一行 |
注意
伪类元素必须要有content 熟悉
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
选择器优先级 （重要）
如果多规则作用域同一个元素上， 且定义相同属性不同值，比如
<style>
#test {
color:red;
}
p {
color: green;
}
</style>
<p id="test">优先级测试</p>
改谁覆盖谁
css 优先级
从高到低分别是
- 在属性后面使用``!important 会覆盖页面任何位置定义的元素样式
- 标签上内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景
行内样式 ==> a
ID选择器 ==> b
类 属性选择器 和 伪类选择器 ==>c
标签选择器， 伪元素 ==> d
image.png
abcd 依次比对 多的谁的优先级高
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
** 正确的顺序为a:link、a:visited、a:hover、a:active (其中，link和visited可以互换) **
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
所以说，a:hover定义一定要放在a:link、a:visited的后面
5.以下选择器分别是什么意思?
/*匹配id 为 header 的元素*/
#header{}
/*匹配class 为 header 的元素*/
.header{}
/*匹配父元素class是header 子元素 class 是 logo 的元素*/
.header .logo{}
/*匹配父元素class同时含有header 和 mobile的元素*/
.header.mobile{}
/*匹配两种元素 这两种元素定义统一种样式 */
.header p, .header h3{}
/*匹配父元素id为header 子元素class为nav的元素的直接子li标签 没有孙子啥事*/
#header .nav>li{}
/* 匹配父元素id为header 子元素a标签在鼠标悬浮展现的样式 */
#header a:hover{}
/* 匹配父元素id为header 子元素class为logo之后同级p 标签*/
#header .logo~p{}
/*匹配父元素id为header 子元素input标签的属性type为text的元素*/
#header input[type="text"]{}
6.列出你知道的伪类选择器
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个元素 |
| E:linlk | 匹配所有没被点击的链接 |
| E:visited | 匹配所有被点击的元素 |
| E:active | 匹配已经在这个元素按下， 还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E：lang(c) | 匹配lang属性等于c的E元素 |
| E: enabled | 匹配表单中可用的元素 |
| E：disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配表单中被选中的radio或checkbox元素 |
| E:selection | 匹配用户当前选中的元素 |
| E:root | 匹配文档的根元素 对于HTML 就是HTML元素 |
| E:nth-child(n) | 匹配他的父元素的第N个子元素，第一个编号是 1 |
| E：nth-last-child | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:nth-of-type(n) | 与：nth-child（）作用类似，但是仅匹配使用同种标签的元素 |
| E:nth-last-of-type(n) | 与：nth-last-child（）作用类似，但是仅匹配使用同种标签的元素 |
| E:last-child | 匹配父元素的最后一个子元素 等同于：nth-last-child（1） |
| E：first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于E:nth-of-type(1) |
| E：last-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于E:nth-last-of-type(1) |
| E:only-child | 匹配父元素下仅有的一个子元素 等同于：first-child：last-child或者nth-child（1）：nth-last-child（1） |
| E:only-child | 匹配父元素下仅有的一个子元素 等同于：first-of-type：last-of-type或者nth-of-type（1）：nth-last-of-type（1） |
7div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
div:first-child: 父元素内第一个子元素而且必须是div元素（先确定位置 在判断类型）
div:first-of-type: 父元素内只要找到类型为div的第一个元素（先判断类型再判断位置）
空格代表类型为空 匹配任何类型
div :first-child: 在div里面子元素的第一个元素（类型为空随意匹配，确定位置）
div :first-of-type: 在div子元素里面的所有不同类型的第一个元素（以类型判断选中的，在选中的类型中找出想要的位置元素）
扩展：.child:first-of-type 这样会匹配到所有class包含child的�所有�元素
<span class="child">只会选中我</span>
<span class="child">我不被选中</span>
<div class="child">还会选中我</div>
8.运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{ color: red;}
.item1:first-of-type{ background: blue;}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
- .item1:first-child{ color: red;}
选择父元素里面第一个元素 且这个元素的class名是item1 字体颜色为红色
2 . .item1:first-of-type{ background: blue;}
选择父元素里面每一类元素class为item1的第一个元素背景为蓝色
所以 最终 p标签 aa字体变红 p 和 第一个H3为背景为蓝色
image.png
规范化书写CSS
遵守规范
使用合适的命名标签
指向明确 范围
合理复用class
以上
谢谢欣赏
