✨这是我参与「第四届青训营 」笔记创作活动的第1天
css选择器
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。
在讨论css优先级之前,先介绍一下css的7种基础的选择器:
id选择器:
如 #id{}
具有 id 属性的 HTML 元素应该是页面上具有 ID 值的唯一元素。
类选择器:
如 .class{}
一个 HTML 元素可以在其 class 属性中定义一个或多个项目。匹配应用类的任何元素。
属性选择器:
如 li[id="red"]{}
带有特定属性或属性值的 HTML 元素的样式。
伪类选择器:
如 :hover{}
HTML 元素发现自己处于各种状态,要么是因为它们与之互动,要么是因为它们的一个子元素处于某种状态。
伪元素选择器:
如 ::before{}
伪元素与伪类不同,因为它们不是响应平台状态,而是像使用 CSS 插入新元素一样。 ❗一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
标签选择器:
如 h1{}
会选择页面上所有的该标签元素
通配选择器:
如 *{}
用来选中页面中所有的元素
选择器的优先级:
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
❗出现!important的权重最大