Interview Summary

Css问题汇总

1、Css的选择器
选择器 用法
id选择器 #myid
类选择器 .myclassname
标签选择器 div,h1,p
相邻选择器 h1+p
子选择器 ul > li
后代选择器 li a
通配符选择器 *
属性选择器 a[rel=”external”]
伪类选择器 a:hover, li:nth-child
2、样式层叠次序

当同一个 HTML 元素定义了多个样式时，应该使用哪个样式？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表（在<head>和</head>之间的link中）
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

注： CS 选择器有修饰上的优先级，即：

内联选择器 > id选择器 > 类选择器 > 标签选择器

3、多重样式优先级顺序

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

  1. 通用选择器（*）
  2. 元素(类型)选择器
  3. 类选择器
  4. 属性选择器
  5. 伪类
  6. ID 选择器
  7. 内联样式
4、权重计算:
  • 内联样式表的权值最高 1000
  • ID 选择器的权值为 100
  • Class 类选择器的权值为 10
  • HTML 标签选择器的权值为 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#redP p {   

/* 权值 = 100+1=101 */    

color:#F00;  /* 红色 */   

}    

#redP .red em {    

/* 权值 = 100+10+1=111 */    

color:#00F; /* 蓝色 */   

}   

#redP p span em {   

/* 权值 = 100+1+1+1=103 */

color:#FF0;/*黄色*/   

}

CSS 优先级法则：

  • A 选择器都有一个权值，权值越大越优先；
  • B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
  • C 创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；
  • D 继承的 CSS 样式不如后来指定的 CSS 样式；
  • E 在同一组属性设置中标有 “!important” 规则的优先级最大；
5、https://www.w3cschool.cn/css/css-outline.html
学习笔记
css

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！