问答
CSS选择器常见的有几种?
- 标签选择器，
标签名{}，作用于所有此标签。 - 类选择器，
.class{}，在标签内定义class="" - ID选择器，
#ID{}, 在标签内定义id=""，有严格的一一对应关系 - 子选择器，
.span>li{}，作用于父元素span类下一层的li标签 - 包含选择器，
.span li{}，作用于父元素span下所有li标签 - 通用选择器，
*{}，匹配所有html的标签元素 - 伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
选择器的优先级是怎样的?
- 总体上 CCS每个选择器本身具有优先级，越具体优先级越高
- 从高到低：
- 属性后面加
!important会覆盖页面内任何位置定义的元素样式 - 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义的样式
- 属性后面加
- 使用多级选择器时
- id选择器的权值为1000，class选择器为100，标签选择器为10，做一下加法运算（当然只是为了形象这么说，一万个class选择器加起来也不如一个id选择器优先级高）
- id选择器的权值为1000，class选择器为100，标签选择器为10，做一下加法运算（当然只是为了形象这么说，一万个class选择器加起来也不如一个id选择器优先级高）
test p.class1 {...}
test .class1.class2 {...}
- 第一种 就是1000+10+100=1110
- 第二种 1000+100+100=1200
- 所以第二种会生效
- 当class样式同级的时候 在style或者 css中 写在后面的会覆盖前面的样式
###class 和 id 的使用场景?
- class定义的样式可以被多个元素所引用，而id只能被一个元素所引用。所以class更多用在比id更加通用的情况。在CSS中尽量不使用ID，因为id的私有度很高，非常容易导致问题。最好的办法不是运用定位器通过亲元素定位到某元素，而是直接给需要添加样式的元素一个class。
- 在 HTML 里 ID 可以用于 JS 以及锚点定位，但是在 CSS 里只要用 class，一个 ID 也不要用。
- 部分引用 [编写可维护的CSS](https://segmentfault.com/a/1190000000388784)
###使用CSS选择器时为什么要划定适当的命名空间？
- 保持可维护性
- 在使用CSS选择器的时候回大量使用class命名定位，尽量保持名字设定的准确简短。
###以下选择器分别是什么意思?
``` HTML
#header{
} /* id选择器 定位到id="header"*/
.header{
} /* class选择器 定位到 class="header"*/
.header .logo{
} /* 定位到header下的所有logo类*/
.header.mobile{
} /* 多元素选择，同时定位header类和mobile类下，*/
/* id和class选择器和选择器连写的时候中间没有分隔符， . 和 # 本身充当分隔符的元素 */
.header p, .header h3{
} /* 多元素选择器，定位header类下的所以p标签和所以h3标签*/
#header .nav>li{
} /* 定位到id为header下的 所有nav类下的直接子元素的所有li标签 */
#header a:hover{
} /* 定位到header id下的所有a标签的伪类hover */
列出你知道的伪类选择器
- 常用的伪类选择器
- hover 匹配当鼠标移动到元素上时的样式
- active 匹配鼠标点住元素时的样式
- focus 匹配元素成为焦点的时候的样式
| 伪类 | 作用 |
|---|---|
| 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) | 匹配不符合当前选择器的任何元素 |
:first-child和:first-of-type的作用和区别
-
E:first-child匹配E的父元素下的所有元素中第一个子元素，若为E，则生效；
E:first-of-type匹配E的父元素下所有使用**同种标签 **的第一个子元素，等同于:nth-of-type(1)
运行如下代码，解析下输出样式的原因。
<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;}匹配的是class="item1"的父元素（也就是ct类的div）下的第一个元素，也就是p标签的“aa”，且这个元素的类是.item1的时候（它正好是），这个样式生效，p标签的字体变为红色。 -
item1:first-of-type:background:blue匹配的是class="item1"的父元素（也是ct类的div）下，所有类型标签下的第一个，且class="item1"的元素。
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
- text-align作用在块级元素上，能让块级元素内的行内元素水平居中。
如果遇到一个属性想知道兼容性，在哪查看?
- 使用caniuse.com 查询相应关键词。
本教程版权归 张宇 和 饥人谷 所有，转载需要说明来源
