css选择器2

一、CSS选择器常见的有几种?

答案链接

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

单个选择器从高到低分别是：

在属性后面使用!important会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

组合选择器：

比较组合选择器的权值
相同权值选择器，层级越长优先级越高
相同权值选择器，越接近目标标签则优先级越高
相同优先级相等，需要看在CSS中的顺序，后面的大于前面的

三、class 和 id 的使用场景?

**1. id **指定标签的唯一标识。

1.1 格式：<input type=password id="userpwd" />
1.2 应用场景：
唯一id号，快速获取标签对象。如：document.getElementById(id)
用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点。
一般用于布局（比如 header，content，footer.....），一些独一无二的元素也可以使用。

2. class 指定标签的类名。

2.1 格式：<input type=button class="btn-submit" />
2.2 应用场景：
- CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
- 在HTML中可以多次使用，并且可以多次重复使用同一类名。

四、使用CSS选择器时为什么要划定适当的命名空间？

方便代码的管理与维护
提高代码的可读性
避免与他人代码相冲突

相关参考：
amazeUi-css编码规范1
amazeUi-css编码规范2
CSS命名空间前缀的思考

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

#header{} /*匹配id="header"的元素*/
.header{} /*匹配class="header"的元素*/
.header .logo{} /*匹配class="header"元素下的class="logo"的元素*/
.header.mobile{} /*匹配class="header 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元素的:hover伪类*/

六、列出你知道的伪类选择器

答案链接

七、:first-child和:first-of-type的作用和区别

:first-child的作用是匹配父元素下的第一个子元素
:first-of-type的作用是匹配父元素下指定类型的第一个子元素
区别：要区别在于:first-of-type选择的子元素是从父元素下的指定类型的第一个子元素，而:first-child选择的子元素是从父元素下第一个子元素

参考：曹婷婷-E:first-child和E:first-of-type

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

Paste_Image.png

蓝色背景：
样式里面设置了first-of-type，也就是第一个类型的元素将应用为蓝色背景，而第一个类型就是p和h3，h3有2个，取第一个。
红色字：
first-child是指后代中第一个子元素，第一个子元素是p，所以只是p应用了红色字。

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

作用：使行内元素（文字、图片）水平居中
作用元素：块级元素
能让什么元素水平居中：块级元素内部的行内元素

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

利用 can i use 即可查询

<p>版权归本人及饥人谷所有，转载请注明出处。