CSS选择器
1.CSS里常见选择器有几种？
- 属性选择器
- id选择器
- 类选择器
- 多元素选择器，用
,分隔，用于同时选择多个元素 - 后代选择器，用空格分隔，如
div p { }用于匹配div元素的后代p元素 - 子元素选择器，用
>分隔，用于匹配父元素的所有直接子元素 - 伪类选择器，常用的有
:link , :hover , :visited , :active , :focus，其中:active要在:hover之后才能实现其样式效果 - 伪类元素选择器，常用的有
:first-link用于匹配元素第一行，:first-letter用于匹配元素第一个字母，:before在元素之前插入生成的内容，:after在元素之后插入生成的内容
2.选择器的优先级是怎样的？
由高到低排序：
- 在属性后面使用
!important是最高优先级，可以覆盖任何位置定义的属性 - 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
3.class 和 id 的使用场景？
class 是元素的类名，一个元素可以有多个类名，一个类名可以用来匹配多个元素，class选择器用于为网页不同部分的元素匹配相同的样式。
id 是元素独有的，一个元素只能有一个id，id也只能用来匹配一个元素，id选择器用于为网页中独特元素匹配属性。
4.使用CSS选择器时为什么要划定适当的命名空间？
使代码更具语义化，便于阅读，方便后期的维护。
5.以下选择器分别是什么意思？
-
#header { }，匹配 id 值为 header 的元素 -
.header { }，匹配 class 值为 header 的元素 -
.header .logo { }，匹配 class 值为 header 的元素下 clas s值为 logo 的子元素 -
.header.mobile { }，匹配 class 值为 header 和 mobile 的元素 -
.header p, .header h3 { }，匹配 class="header" 元素下的p元素和h3元素 -
#header .nav>li { }，匹配 id="header" 元素下的 class="nav" 元素中的所有直接子元素li -
#header a:hover { }，匹配当a鼠标指针指上去是的样式。
6.列出你知道的伪类选择器
- 常用的伪类选择器有：
:link , :hover , :visited , :active , :focus，其中:active要在:hover之后才能实现其样式效果
7.````E:first-child和E:first-of-type```的作用和区别
- ````E:first-child```是指元素 E 的父元素中的第一个子元素；
-
E:first-of-type是匹配元素 E 的父元素中第一个与 E 相同类型的子元素。
8.运行如下代码，解析下输出样式的原因。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
</head>
<body>
<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>
</body>
</html>```
Paste_Image.png
- 样式
.item1:first-child{ color: red; }的作用是将class="item"的元素的父元素即class="ct"里边的第一个元素即<p class="item1">aa</p>文字的颜色设置成红色。 - 样式
.item1:first-of-type{ background: blue; }匹配的是class="item"的元素的父元素即class="ct"里边的第一个与其相同类型的元素，但因为h3与p的class值相同，所以同时匹配到了p和第一个h3。
9.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
-
text-align: center的作用是使块级元素内的行内元素相对该块级元素水品居中，有继承性，该样式添加在该块级元素（即例子中的.ct）上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
.ct {
text-align:center;
width:300px;
background-color:#bbb;
}
.div2 {
background-color:red;
width:200px;
}
</style>
</head>
<body>
<div class="ct">
<p class="item1">包括路易威登（LVHM）、开云（Kering）和爱马仕（Hermes）等著名品牌在内的“制造商联盟”（Unifab）星期四（6月16日）发表声明说，马云的谈话是误导性的，甚至是诽谤性的，与打击假货的有效行动背道而驰。</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
<div class="div2">
<h2>dddd</h2>
</div>
</div>
</body>
</html>
实现效果：
###9.如果遇到一个属性想知道兼容性，在哪查看？
在[caniuse](http://caniuse.com/)中查看。
***
本教程版权归本人和饥人谷所有，转载请注明出处。
