css 单数选择器 类选择器语法 – CSS – 前端 css 固定长度

@ css调试工具？

css说是调试工具其实只是一段 Javascript 代码，但非常实用，它会给页面里所有的 DOM 元素添加一个 1px 的描边（outline），方便大家在调试 CSS 过程中分析、排查问题。

先来看看代码，它有两个版本，一个是使用的$$选择器，代码量更少（浏览器控制台支持 $$ 选择器）；另一种就是传统的document.querySelectorAll选择器：

@ css规则定义有哪些选择符？

css选择符（选择器）有以下这些：

1、通配选择符（ * ）：匹配任意元素。

2、id选择符（ # myid）：匹配 ID 等于“myid”的任意元素 。

3、类选择符（.myclassname）：匹配 class 等于“myclassname”的任意元素.

4、标签选择符（div, h1, p）：选择指定元素名称的所有元素。

5、相邻选择符（E + F）：用于选择（不是内部）指定的第一个元素之后紧跟的元素。

6、子选择符（E > F）：用于选取带有特定父元素的元素，例ul > li，选择所有父级是 <ul> 元素的每个 <li> 元素。（学习视频分享：css视频教程）

7、后代选择符（E F）：用于选取元素内部的元素。

8、伪类和伪元素选择符：用于向某些选择器添加特殊的效果。

@ css的优先级怎么判断？

CSS选择器中比较常见的有标签选择器、ID选择器、类选择器以及子选择器。而事实上，CSS选择器如果细分下来，竟然多达40多种。那他们的优先级该怎么比较呢，下面就来看看吧。

● 不同级别

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

2. 作为style属性写在元素内的样式

3. id选择器

4. 类选择器

5. 元素选择器

6. 通配符选择器

7. 浏览器自定义或继承

总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

● 同一级别

(1) 同一级别中后写的会覆盖先写的样式

(2) 同一级别css引入方式不同，优先级不同

总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

对于选择器优先级，还可以通过计算权重值来比较