1. CSS选择器常见的有几种?
- 基础选择器
1.通配符选择器*{}
2.id选择器#id{}
3.类选择器.class{}
4.标签选择器p{}
- 组合选择器(E F为元素)
1. 多元素选择器E, F (#div1， .clear)
2. 后代选择器E F (#div1 p)
3. 子元素选择器E>F (#div>h1)
4. 直接相邻选择器E+F (匹配E元素之后的相邻的同级元素)
5. 普通相邻选择器（弟弟选择器）E~F (匹配E元素之后的同级元素（无论是否相邻）)
属性选择器(以某个属性作为选择依据) 如input[type="button"]
伪类选择器 如：#head:befor #head:after;
2. 选择器的优先级是怎样的?
1. 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义
同级选择器后声明的覆盖先声明的，声明设定的优先于通过继承的
3. class 和 id 的使用场景?
class的使用场景更为广泛，在html中可以命名相同的class属性.
id使用规则比较严苛，通常情况下id的属性名有且只能出现一次，一般在外层布局的时候用到.
4. 使用CSS选择器时为什么要划定适当的命名空间
1. 为了更好的匹配我们特定需要匹配的元素，只对匹配的元素生效，保证代码样式在合理的控制内不出现不必要的错误。
2. 在团队合作中提供良好的代码阅读，能够更好的合作，同时避免选择器命名的混乱，拥有更好代码维护性。
3. 在产品迭代中，给新的功能提供空间。
5. 以下选择器分别是什么意思?
#header{} 选中 id="header"
.header{} 选中 class="header"
.header .logo{} 选中 class="header"元素内的class="logo"
.header.mobile{} 选中 class="header"内的后代选择器class="mobile"
.header p, .header h3{} 选中 class="header"内的标签p和class="header"内部的标签h3
#header .nav>li{} 选中 id="header"的选择器内部的class="nav"内的子代选择器li
#header a:hover{} 选中 id="header"的选择器内a链接的伪类选择器
6. 列出你知道的伪类选择器
| 选择器 | 解释 |
|---|---|
| E:first-child | 匹配父元素的第一个子元素 |
| E:last-child | 匹配父元素的最后一个子元素 |
| E:first-of-type | 匹配同类型中的第一个同级元素E |
| E:last-of-type | 匹配同类型中的最后一个同级元素E |
| E:nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素E |
| E:nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素E |
| E:empty | 匹配没有任何子元素（包括text节点）的元素E |
| E:active | 向被激活的元素添加样式。 |
| E:hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| E:link | 向未被访问的链接添加样式 |
| E:visited | 向已被访问的链接添加样式 |
| E:focus | 向拥有键盘输入焦点的元素添加样式 |
| E:lang | 向带有指定 lang 属性的元素添加样式 |
| E::selection | 匹配用户当前选中的元素 |
| E:checked | 匹配表单中被选中的radio或checkbox元素 |
| E:disabled | 解选择每个禁用的input元素 |
| E:enabled | 选择每个启用的input元素 |
| E:target | 选择当前活动的元素(某个被链接的元素) |
| E:root | 匹配文档中的根元素 |
| E:only-child | 匹配父元素中的仅有的一个子元素(E) |
| E:only-of-type | 匹配父元素中的使用同种标签唯一一个元素(E) |
| E:first-line | 匹配E元素的第一行 |
| E:first-letter | 匹配E元素的第一个字母 |
| E:before | 在E元素之前插入生成的内容 |
| E:after | 在E元素之后插入生成的内容 |
| E::selection | 匹配用户当前选中的元素 |
| E:not(s) | 匹配不符合当前选择器的任何元素 |
| E:target | 匹配文档中特定"id"点击后的效果 |
7. :first-child和:first-of-type的作用和区别
E:ntn-of-type（n）(选择第几个)
E:first-child ：匹配元素E的第一个子元素，该子元素不是E就不会生效；（只定位在第一个元素）
E:first-of-type : 匹配父元素下使用同种标签的第一个子元素.
(如下图所示)
0_1478619952221_QQ截图20161108234459.jpg
要找的是第一个元素一定是p标签的单第一个标签为h3,所以没有生效
0_1478620026873_QQ截图20161108234653.jpg
被选中的是第一个p1生效
0_1478620286020_QQ截图20161108235052.jpg
选中的是第三个p标签
8. 运行如下代码，解析下输出样式的原因。
0_1478620821971_QQ截图20161109000006.jpg
.item1: first-child指的是排在第一位的符合class="item1"的子元素即<p class=“item1”>内的 aa变为红色。
.item1: first-of-type指的是符合class="item1"的所有子元素中的第一个，如果有不同标签名则分别作用在第一个上即<p class=“item1”>和<h3 class=“item1”>。所以背景都为green;<h3 class=“item1”>bb</h3属于同类标签的第二个所以没有变。
版权归饥人谷--楠柒所有如有转发请注明出处谢谢
