1.CSS选择器常见的有几种?
1）.基本选择器：
- 通配选择器~选择文档中所有的html元素，用一个*表示
- 元素选择器~选择指定类型的的html元素
- ID选择器~选择指定ID属性值的html元素，选择的时候前面加上一个#号
- 类选择器~选择指定class属性的任意多个html元素，选择的时候前面加上一个.号
2）.层次选择器：
- 多选择器 E,F~选择匹配E元素，F元素
- 后代选择器 E F~选择匹配E元素下的F元素
- 直接子元素选择器 E > F~选择匹配E元素下的直接子元素F
- 相邻兄弟选择器 E + F~选择匹配E元素后的直接相邻元素F
- 通用相邻选择器 E ~ F~选择匹配E元素后的所有同级元素F
3）.伪类选择器：
结构伪类选择器
- E:first-child~匹配E元素的第一个子元素
- E:last-child~匹配E元素的最后一个子元素
- E:root~匹配E元素所在文档的根元素
- E:nth-child(n)~匹配E元素的第n个子元素
- E:nth-last-child(n)匹配E元素的倒数第n个子元素
- E:nth-of-type(n)匹配父元素内具有指定类型的第n个E元素
- E:nth-last-of-type(n)匹配父元素内具有指定类型的倒数第n个E元素
- E:first-of-type匹配父元素内具有指定类型的第一个E元素
- E:last-of-type匹配父元素内具有指定类型的最后一个E元素
- E:only-child匹配父元素内只包含一个子元素，且该子元素匹配E元素
- E:only--ofchild匹配父元素内只包含一个同类型的子元素，且该子元素匹配E元素
- E:empty匹配没有子元素的元素，且该元素五任何文本节点
动态伪类选择器
- E:link匹配未被访问过的超链接
- E:visited匹配被访问过的超链接
- E:active匹配鼠标已经其上按下、还没有释放的E元素
- E:hover匹配鼠标停留其上的E元素
- E:focus匹配获得焦点的E元素
语言伪类选择器
- E:lang(language)匹配指定了lang属性且值为language的E元素
否定伪类选择器
- E:not(F)匹配所欲除F元素外的E元素
4）、伪元素选择器：
::first-letter用来选择文本块的第一个字母
::first-line用来选择元素的第一行文本
::before和::after不是指存在标记中的内容，而是可以插入额外内容的位置，需要配合content属性使用
::selection用来匹配突出显示的文本
5）、属性选择器：
- E[attr]~匹配所有具有属性attr的E元素
- E[attr=val]~匹配具有属性attr，attr值为val的元素，val区分大小写
- E[attr|=val]~匹配具有属性attr，attr值为val或以val-开始的元素
- E[attr=val]匹配具有属性attr，attr值具有多个空格分隔、其中一个值等于value的元素
- E[attr*=val]~匹配具有属性attr，attr值的任意位置包含了val的元素
- E[attr^=val]~匹配具有属性attr，attr值以val开头的任何字符串的元素
- E[attr$=val]~匹配具有属性attr，attr值以val结尾的任何字符串
2.选择器的优先级是怎样的?
答：优先级就是一个 应用于指定的CSS声明的 权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
CSS优先级从高到低分别是：
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式( !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。)
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
参考文档
3.class 和 id 的使用场景?
<div id='header'><!-- ID属性值在当前页面具有唯一性，可快速获取标签对象，可用于页面大的布局-->
<div class="wrap">这里是标题</div><!-- 把一些特定的通用的样式放到一个class类中，需要此样式的标签，可以在添加此类-->
</div>
<div id='content'>
<!-- 多个类，放在一个class属性里，用空格隔开-->
<div class="wrap intr">这里是内容
<!-- ID属性值用于充当label标签for属性的值，在 label 元素内点击文本，就会触发此控件，为鼠标用户改进了可用性-->
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label>
</div>
</div>
<div id='footer'>
<div class="wrap">这里是footer</div>
4.使用CSS选择器时为什么要划定适当的命名空间？
答：可以使代码具有可读性和可维护性，便于写代码和调试代码；避免因为命名不规范而导致出问题。
5.以下选择器分别是什么意思?
#header{
}/*匹配id='header'的元素*/
.header{
}/*匹配class='header'的元素*/
.header .logo{
}/*匹配元素为class='header'下class='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{
}/*匹配id='header'的元素下a元素的:hover伪类*/
6.列出你知道的伪类选择器
- :first-child
- :last-child
- :root
- :nth-child(n)
- :nth-last-child(n)
- :nth-of-type(n)
- :nth-last-of-type(n)
- :first-of-type
- :last-of-type
- :only-child
- :only-of-child
- :empty
- :not()
- :link
- :visited
- :active
- :hover
- :focus
- :lang(language)
7.:first-child和:first-of-type的作用和区别
答：1.:first-child的作用是匹配父元素下的第一个子元素；
2.:first-of-type的作用是匹配父元素下指定类型的第一个子元素
区别：:first-of-type选择的子元素是从父元素下的指定类型的第一个子元素，而:first-child选择的子元素是从父元素下第一个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task8</title>
<style>
.content a:first-child{
font-size: 30px;
}/*匹配到a元素，因为a元素是父元素的第一个子元素*/
.content p:first-child{
font-size: 30px;
}/*匹配不到p元素，因为p元素不是父元素的第一个子元素*/
.content a:first-of-type{
color: #f00;
}/*匹配到a元素，因为a是div的所有类型为a的子元素中的第一个*/
.content p:first-of-type{
color: #f00;
}/*匹配到p元素，因为p是div的所有类型为p的子元素中的第一个*/
</style>
</head>
<body>
<div class="content">
<a href="">我是a链接</a>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
</div>
</body>
</html>
QQ图片20160809141013.png
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>
运行结果如下：
QQ图片20160809141654.png
item1:first-child{ color: red;}会匹配父元素下的第一个子元素，即p元素，将其字体颜色设置诶红色；
.item1:first-of-type会匹配父元素下的指定.item1类型的元素，那么这里就会选择p.item1,第一个h3.item1，将其背景颜色设置为蓝色
9.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
答：作用是使元素内的文本居中，作用在块级元素上，能让块级元素中的行内元素水平居中。
10.如果遇到一个属性想知道兼容性，在哪查看?
答：可以用 caniuse.com来查css属性的兼容性。
QQ图片20160809151636.png
网友评论