css选择器2

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

答案链接

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

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

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

组合选择器：

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

三、class 和 id 的使用场景?

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

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

2. class 指定标签的类名。

• 2.1 格式：
• 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 即可查询

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