css选择器

CSS选择器常见的有几种?

id选择器 #name{}
class类选择器 .name{}
属性选择器 input[属性名称="？"]
分组选择器 用，分隔开
派生选择器 （空格）（所有）后代选择器
直接子元素选择器 p>a{}直接的孩子
相邻元素选择器 E+F 与E相邻的元素F
普通相邻选择器 E~F 与E相邻的元素F，以及F同级的其他F元素
通配符选择器 *｛｝

后代选择器，相邻选择器
css3选择器
first-of-type
last-of-type
ie8后兼容

选择器的优先级是怎样的?

1. 在属性后面使用 !important
2. 会覆盖页面内任何位置定义的元素样式
3. 作为style属性写在元素标签上的内联样式
4. id选择器
5. 类选择器
6. 伪类选择器
7. 属性选择器
8. 标签选择器
9. 通配符选择器
10. 浏览器自定义
    优先级的计算规则:标签选择器为1，类选择器为10，ID选择器为100，例如.nav h1优先级10+1，并且1+1+1+...+1不大于10

class 和 id 的使用场景?

class具有普遍性，同一个页面中可被多次引用，id具有唯一性，划分大区块，通常用于页面布局，当使用id和class同时修改一个属性时，id的权重高于class。

以下选择器分别是什么意思?

#header{}/*id为header的标签*/
.header{}/*class为header的标签*/
.header .logo{}/*class为header的标签后代中class为logo的标签*/
.header.mobile{}/*同时具有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伪类*/

列出你知道的伪类选择器

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的作用和区别

.box p first-child：父元素的第一个孩子是p的生效（先找父亲的第一个孩子看是否是女孩）
.box p first-of-type：父元素下定位p 同级、同类型第一个生效（找到父亲，看自己是否是同类型标签的第一个）

运行如下代码，解析下输出样式的原因。

a.png

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

作用是让元素水平居中，作用在块级元素上，让块级元素中的行内元素水平居中

如果遇到一个属性想知道兼容性，在哪查看?

caniuse
声明：本博客版权归作者和饥人谷所有，转载需说明来源！