课程目标
- 掌握常见 CSS 选择器的用法
- 对选择器优先级有一定认识
学习建议
- 从学 CSS 开始，课程视频里的代码需要边听、边暂停、边跟着写
预习视频
课程任务
问答
一、CSS选择器常见的有几种?
- 基础选择器
| 选择器 | 名称 | 含义 |
|---|---|---|
| * | 通用元素选择器 | 匹配页面任何元素（这也就决定了我们很少使用） |
| #id | id选择器 | 匹配特定的id元素 |
| .class | 类选择器 | 匹配class包含特定类的元素 |
| element | 标签选择器 | —— |
以下为实例：
*{
}/*通用元素选择器*/
#id-selected{
}/*id选择器*/
.class{
}/*类选择器*/
p{
}/*标签选择器*/
- 组合选择器
| 选择器 | 名称 | 含义 |
|---|---|---|
| E,F | 多元素选择器 | 同时匹配E元素和F元素 |
| E F | 后代选择器 | 选择E元素的所有后代F元素（不是子元素，子元素向下递归） |
| E>F | 子元素选择器 | 选择E元素的所有直接子元素F |
| E+F | 直接相邻选择器 | 匹配E元素之后的相邻同级元素F |
| E~F | 普通相邻选择器（弟弟选择器） | 匹配E元素之后的所有同级元素F（不论相邻与否） |
小知识点：“h1.class名称”表示这个选择器既是h1又有class的名字，这样可以区分两个class名字一样但是标签不一样的情况。
以下为实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
</head>
<style>
.parent,
.mydiv {
font-size: 30px;
}
.parent p {
background: yellow;
}
.parent>div {
border: 1px solid black;
}
.mydiv div+p {
text-align: center;
}
.mydiv div~p {
background: #ccc;
}
</style>
<body>
<div class="parent">
<p>child1</p>
<div class="child2">
<div>child2-1</div>
<div>child2-2</div>
</div>
<div>child3</div>
<div>child4</div>
</div>
<div class="mydiv">
<p>div1</p>
<div>div2</div>
<p>div3</p>
<p>div4</p>
</div>
</body>
</html>
以上代码的输出结果为：
组合选择器输出结果
- 属性选择器
| 选择器 | 名称 | 含义 |
|---|---|---|
| E[attr] | 匹配所有具有属性为attr的元素 | div[id]能选择所有具有id属性的div |
| E=[attr=value] | 匹配所有属性为value的元素 | div[type=text]匹配id=text的div |
| E[attr~=value] | 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 | —— |
| E[attr ^= value] | 匹配属性attr的值以value开头的元素 | —— |
| E[attr $= value] | 匹配属性attr的值以value结尾的元素 | —— |
| E[attr *= value] | 匹配属性attr的值包含value的元素 | —— |
其中，E=[attr=value]较为常用
以下为实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
</head>
<style>
input[type="text"] {
background: yellow;
}
input[placeholder="密码"] {
background: green;
}
</style>
<body>
<form name="myform" action="index.html" method="post">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
</form>
</body>
</html>
以下为输出结果
属性选择器输出结果
- 伪类选择器
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:last-child | 匹配元素E的最后一个子元素 |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:only-child | 匹配父元素下仅有的一个子元素 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
| E:nth-of-type(n) | 与E:nth-child类似，但是仅匹配同种标签的 |
| E:nth-last-of-type | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:link | 匹配所有未被点击的链接 |
| 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:empty | 匹配一个不包含任何子元素的元素，文本节点也被看做是子元素 |
| E:not(selector) | 匹配不符合当前选择器的任何元素 |
以下为实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.wrap a:first-child:link {
background: yellow;
}
.wrap a:nth-child(2):visited {
text-decoration: line-through;
}
.wrap a:nth-child(3):active {
font-size: 20px;
}
.wrap a:last-child:hover {
color: red;
}
.wrap :lang(c) {
border: 1px solid black;
}
.myform :enabled {
background: blue;
}
.myform :focus {
background: yellow;
}
.myform :disabled {
display: block;
}
.myform :checked {
display: block;
}
.myform :selection {
display: block;
}
.wrap :empty{
text-align: center;
}
</style>
<body>
<div id="header">
<div class="wrap">
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
</div>
</div>
<div id="cotent">
<div class="wrap">
<div lang="c">侧边栏
</div>
中心区块
<form class="myform" action="index.html" method="post">
<p>
用户名：
<input type="text" name="username" placeholder="用户名" />
</p>
<p>
<input type="radio" name="sex" value="male" checked/>男
<input type="radio" name="sex" value="female" />女
<input type="radio" name="sex" value="male/female" disabled/>刘梓晨
</p>
</form>
</div>
<div id="footer">
<div class="wrap">
我是底部
</div>
</div>
</body>
</html>
以下为输出结果：
伪类选择器输出结果
- 伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::first-line | 匹配E元素的第一行 |
| E::first-letter | 匹配E元素的第一个字母 |
| E::before | 在E元素之前插入生成的内容 |
| E::after | 在E元素之后插入生成的内容 |
其中，n的取值为
- 1，2，3，4，5
- 2n+1, 2n, 4n-1
- odd, even
以下为实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素选择器</title>
<style>
p:first-child::first-line {
color: red;
}
p:nth-child(2)::first-letter {
font-size: 50px;
}
p:nth-child(3)::before {
content: "!";
}
p:nth-child(3)::after {
content: "???????";
}
</style>
</head>
<body>
<div id="content">
<div class="wrap">
<p>这是第一行</br>
这是第二行
</p>
<p>这是第三行</p>
<p>这是第四行</p>
</div>
</div>
</body>
</html>
以下为输出结果：
伪元素选择器输出结果
** 二、选择器的优先级是怎样的? **
-
CSS规则由单个选择器组成：
- 在属性后面加!important会覆盖页面上任何位置定义的属性样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
-
CSS选择器由多个选择器组成：
-
“一万个calss的权重加起来也没有一个if的权重高”
-
权值高的选择器作用的越具体，权重越高
** 三、class 和 id 的使用场景? **
- class名称可以重复，可设置样式后赋予不同的元素
- id名称不能重复，对页面排版进行结构化布局用
- id是唯一的，更多的是留给JS用
** 四、使用CSS选择器时为什么要划定适当的命名空间？ **
- 代码易于写作与维护，易于让人读懂
- 避免命名不规范而导致的出错
** 五、以下选择器分别是什么意思? **
#header{
}/*匹配id=header的元素*/
.header{
}/*匹配class=header的元素*/
.header .logo{
}/*后代选择器，匹配calss=header元素的后代中的class=logo的元素*/
.header.mobile{
}/*匹配calss="header mobile"的元素*/
.header p, .header h3{
}/*多元素选择器，匹配class=header元素的后代中的p元素及h3元素*/
#header .nav>li{
}/*后代选择器，匹配id=header元素后代中的class=nav的元素后代中的直接子元素li*/
#header a:hover{
}/*后代元素选择器，匹配id=header元素中的所有a链接鼠标悬停在其上的效果*/
** 六、列出你知道的伪类选择器 **
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:last-child | 匹配元素E的最后一个子元素 |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:only-child | 匹配父元素下仅有的一个子元素 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
| E:nth-of-type(n) | 与E:nth-child类似，但是仅匹配同种标签的 |
| E:nth-last-of-type | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:link | 匹配所有未被点击的链接 |
| 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:empty | 匹配一个不包含任何子元素的元素，文本节点也被看做是子元素 |
| E:not(selector) | 匹配不符合当前选择器的任何元素 |
** 七、:first-child和:first-of-type的作用和区别 **
详见：饥人谷知识点二：关于伪类选择器:first-child和:first-of-type
** 八、运行如下代码，解析下输出样式的原因。 **
<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;
}
以上代码匹配作为子元素的首个item1，所以aa的颜色为红色
.item1:first-of-type{
background: blue;
}
以上代码匹配作为子元素的所有标签的第一个item1，其中aa为第一个p，bb为第一个h3，所以aa和bb的背景色为蓝色
详见：饥人谷知识点二：关于伪类选择器:first-child和:first-of-type
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center是让块级元素内的元素（文本或图片）居中，只能作用在块级元素。
附块级元素与行内元素的分类：
- 块级元素：div、p、h1…h6、table、tr、ul、li、dl、dt、form
- 行内元素：a、span、img、input、button、em、textarea
** 如果遇到一个属性想知道兼容性，在哪查看? **
通过网址 http://caniuse.com/ 去查询其兼容性
比如想要查代码inline-block的兼容性
inline-block的兼容性
本教程版权归本人和饥人谷所有，转载须说明来源
网友评论