CSS的选择器及优先级|青训营笔记

127 阅读1分钟

✨这是我参与「第四届青训营 」笔记创作活动的第1天

css选择器

CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。 image.png 在讨论css优先级之前,先介绍一下css的7种基础的选择器:

id选择器:

如 #id{}

具有 id 属性的 HTML 元素应该是页面上具有 ID 值的唯一元素。

类选择器:

如 .class{}

一个 HTML 元素可以在其 class 属性中定义一个或多个项目。匹配应用类的任何元素。

属性选择器:

如 li[id="red"]{}

带有特定属性或属性值的 HTML 元素的样式。

伪类选择器:

如 :hover{}

HTML 元素发现自己处于各种状态,要么是因为它们与之互动,要么是因为它们的一个子元素处于某种状态。

伪元素选择器:

如 ::before{}

伪元素与伪类不同,因为它们不是响应平台状态,而是像使用 CSS 插入新元素一样。 ❗一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

标签选择器:

如 h1{}

会选择页面上所有的该标签元素

通配选择器:

如 *{}

用来选中页面中所有的元素

选择器的优先级:

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

❗出现!important的权重最大