1.CSS选择器常见的有几种?
- 基础选择器
| 选择器 | 含义 |
|---|---|
| * | 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用） |
| #id | id选择器，匹配特定id的元素 |
| .class | 类选择器，匹配class包含（不是等于）特定类的元素 |
| element | 标签选择器 |
demo：
* {
font-family: '微软雅黑';
}
#id-selector{
color: #333;
}
.class-selector{
background: #f1f1f1;
}
p {
height: 50px;
line-height: 50px;
}
- 组合选择器
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用,分隔，同时匹配元素E或元素F |
| E F | 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F |
| E>F | 子元素选择器，用>分隔，匹配E元素的所有的直接子元素 |
| E+F | 直接相邻选择器，匹配E元素之后的相邻的同级元素F |
| E~F | 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否） |
| .class1.class2 | id和class选择器和选择器连写的时候中间没有分隔符, .和#本身充当着分隔符的元素 |
| element#id | id和class选择器和选择器在连写的时候中间没有分隔符, .和#本身充当分隔符的元素 |
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器demo</title>
<style type="text/css">
.title1,p{
color: red;
} /* 多元素选择器，标题1和段落1、2被选中 */
#box p{
font-size: 30px;
}/* 后代选择器，段落1、2被选中 */
#box>p{
text-align: center;
}/* 子元素选择器，只有段落1是box的直接子元素，段落2是box的子元素的向下递归 */
.button+a{
color: green;
}/* 普通相邻选择器，确认 2被选中 */
#box~p{
font-family: "微软雅黑";
}/* 弟弟选择器，段落1、2都是box的子元素或者子元素向下递归，只有段落3与box同级 */
</style>
</head>
<body>
<div id="box">
<h1 class="title1">我是标题1</h1>
<h1 class="title2">我是标题2</h1>
<p>我是段落1</p>
<div id="box2">
<p>我是段落2</p>
</div>
</div>
<div id="box3">
<div class="button">
<a href="#">确认1</a>
</div>
<a href="#">确认2</a>
</div>
<p>我是段落3</p>
</body>
</html>
组合选择器.png
- 属性选择器
在html中，通过给元素添加属性，给以元素添加一些附加的信息，属性选择器就可以通过定位属性来选取特定的元素。
| 选择器 | 含义 |
|---|---|
| E[attr] | 用来选择有某个属性的元素，不论这个属性的值是什么。 |
| E[attr = value] | 用来选取具有属性attr并且属性值为val的元素。 |
| E[attr ~= value] | 当某个元素的某个属性具有多个用空格隔开的属性值，此时使用E[attr~=val]只要attr属性多个属性值中有一个于val匹配元素就会被选中。 |
| E[attr ^= value] | 用来选择属性attr的属性值是以val开头的所有元素。 |
| E[attr $= value] | 刚好跟E[attr^=val]相反，用来选择具有attr属性且属性值以val结尾的元素。 |
| E[attr *= value] | 用来选择具有属性attr并且只要属性值中包含val字符串的元素 |
以E[attr = value]为例写一个demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
a[id="button"]{
color: red;
}/*选择id属性为button的a链接，1和3被选中 */
</style>
</head>
<body>
<div id="box">
<a id="button" href="#">确认1</a>
<a class="button" href="#">确认2</a>
<a id="button" href="#">确认3</a>
</div>
</body>
</html>
属性选择器.png
- 伪类选择器
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| 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:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| E:nth-last-child(n) | 匹配其父元素的倒数第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 | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
| E:only-child | 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty | 匹配一个不包含任何子元素的元素，文本节点也被看作子元素 |
| E:not(selector) | 匹配不符合当前选择器的任何元素 |
n的取值
- 1，2，3，4，5
- 2n+1, 2n, 4n-1
- odd, even
伪类选择器数量较多，这5种动态伪类选择器「E:link,E:visited,E:active,E:hover,E:focus」更为常见一点。
针对[E:first-child]和E:first-of-type用一个demo理解一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
ul>li:first-child{
font-size: 30px;
}/*选取ul元素的第一个子元素li，显然不存在。*/
ul>p:first-child{
color: red;
}/*选取ul中的第一个子元素p,1被选中*/
ul>li:first-of-type{
color: green;
}/*选取ul中的第一个li元素,3被选中*/
</style>
</head>
<body>
<ul>
<p>1</p>
<p>2</p>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
伪类选择器.png
总结一下：
[E:first-child]匹配父元素的第一个子元素且这个子元素必须为E。
E:first-of-type匹配父元素下使用同种标签的第一个子元素且这个子元素必须为E。E:first-of-type不会去管这个E元素是不是第一个子元素，这是与[E:first-child]最大的不同。
- 伪元素选择器
以前我们使用的伪元素是:first-letter,:first-line,:before,:after,这样的。但css3定义的伪元素变成了双冒号，主要用来区分伪类和伪元素。对于IE6-8,仅支持单冒号表示方法，但是其他现代浏览器两种表示方法是都可以的，也就是说在现代浏览器中伪元素使用双冒号和单冒号都是会识别的。
| 选择器 | 含义 |
|---|---|
| E::first-line | 用于匹配元素的第一行文本，常用于文本排版 |
| E::first-letter | 用来选择文本块的第一个字母,也是常用于文本排版方面 |
| E::before,E::after | 配合使用content属性可以E元素的前、后插入额外内容，尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。 |
2.选择器的优先级是怎样的?
CSS的优先级从低到高的顺序为：
- 在属性后面使用
!important会覆盖页面内任何位置定义的元素样式 - 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
总而言之判断CSS选择器规则优先级很简单，每个选择器本身有优先级，越具体优先级越高。
如果优先级相同的话，根据在文档的位置来决定，后面的会覆盖前面的。
3.class 和 id 的使用场景?
- 如果想要对多个元素使用某个样式时，就要用到class。
- 如果只有一个元素需要加样式，或者页面上只有一个元素，那就应该使用id，id属性就是用来唯一的命名元素。
另外在页面中定位元素位置的时候也需要使用id属性，在后面的学习中应该会用到。
4.使用CSS选择器时为什么要划定适当的命名空间？
- 使代码语义化，便于团队开发和维护。
-方便你去修改代码，在页面没有达到你预期的效果时，良好的CSS命名会让你快速找到需要修改的地方。
5.以下选择器分别是什么意思?
#header{
} /* 选择id="header"的元素*/
.header{
}/*选择class="header的元素"*/
.header .logo{
}/*选择class="heade"元素下的所有class="logo"的子元素 */
.header.mobile{
}/*选择class中同时有herder和mobile的元素*/
.header p, .header h3{
}/*选择class="header"元素下的所有的p元素和h3元素*/
#header .nav>li{
}/*选择id=“header”元素下的class="nav"元素下的直接子元素li元素*/
#header a:hover{
}/*选择id=“header”元素下的所有子元素a的伪类hover*/
6.列出你知道的伪类选择器
问答1中已列出
7.:first-child和:first-of-type的作用和区别
问答1中已列出
8.运行如下代码，解析下输出样式的原因。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
.item1:first-child {
color: red;
}/*寻找各个元素中的第一个子元素，其中class=item1就会被匹配，只有这个p元素满足条件*/
.item1:first-of-type {
background: blue;
}/*寻找各个元素中的同种标签下的的第一个子元素，其中class=item1会被匹配，p元素和第一个h3元素满足条件*/
</style>
</head>
<body>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
</body>
</html>
运行结果.png
9.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中。
text-align: center的作用是文本居中，作用在块级元素上，让内部的行内元素比如文本或者图片水平居中。
10.如果遇到一个属性想知道兼容性，在哪查看?
可以去Can I Use查询属性的兼容性。
本教程版权归饥人谷_任磊和饥人谷所有，转载须说明来源。
