这篇文章的内容是 CSS 的选择器,这是写页面样式的第一步,知道 CSS 有哪些选择器是每个前端工程师必会的内容之一。
一、什么是 CSS 中的选择器?
CSS 中的选择器用于选择要应用样式的 HTML 元素。选择器是 CSS 中的关键部分,允许你精确地定位和样式化特定的元素或元素组。
二、常见的 CSS 选择器及其用法:
1.元素选择器(Element Selector):选择特定的 HTML 元素类型。例如,要选择所有段落元素,使用 p 选择器:
p {/* 样式规则在这里 */
}
2.类选择器(Class Selector):选择具有特定类名的元素。类选择器以点 . 开头,后面跟类名。例如,要选择所有类名为 "highlight" 的元素,使用 .highlight 选择器:
.highlight {/* 样式规则在这里 */
}
3.ID 选择器(ID Selector):选择具有特定 ID 的元素。ID 选择器以井号 # 开头,后面跟元素的 ID。注意,每个页面应该只有一个具有唯一 ID 的元素。例如,要选择 ID 为 "header" 的元素,使用 #header 选择器:
#header {/* 样式规则在这里 */
}
4.后代选择器(Descendant Selector):选择元素的后代元素。后代选择器使用空格分隔元素。例如,要选择所有 <ul> 元素内部的 <li> 元素,使用 ul li 选择器:
ul li {/* 样式规则在这里 */
}
5.直接子元素选择器(Child Selector):选择元素的直接子元素。直接子元素选择器使用 > 符号。例如,要选择< div> 元素的直接子元素 <p>,使用 div > p 选择器:
div > p {/* 样式规则在这里 */
}
6.通用选择器(Universal Selector):选择页面上的所有元素。通用选择器使用 * 符号。例如,要选择页面上的所有元素,使用 * 选择器:
* {/* 样式规则在这里 */
}
7.伪类选择器(Pseudo-class Selector):选择元素的特定状态或位置。伪类选择器以冒号 : 开头。例如,选择所有链接元素的悬停状态,使用 a:hover 选择器:
a:hover {/* 样式规则在这里 */
}
8.伪元素选择器(Pseudo-element Selector):选择元素的特定部分,如首字母或最后一个行。伪元素选择器以双冒号 :: 开头。例如,选择段落的首字母,使用 p::first-letter 选择器:
p::first-letter {/* 样式规则在这里 */
}
这些是 CSS 的常用选择器,将这些选择器组合起来使用,或者是嵌套使用可以改变选择器的权重。
三、CSS 选择器的优先级
CSS 选择器的优先级决定了当多个规则应用于同一元素时,哪个规则的样式将被应用。优先级是由选择器的特定性(specificity)和源代码中的顺序(source order)共同决定的。以下是关于优先级的详细内容:
1.特定性(Specificity):特定性是一个用于衡量选择器权重的值,它由四个部分组成:a、b、c 和 d,它们的值分别代表以下内容:
a:内联样式(在元素的 style 属性中定义的样式)的数量(权重值最高,值为1000)。
b:ID 选择器的数量(权重值为100)。
c:类选择器、属性选择器和伪类选择器的数量(权重值为10)。
d:元素选择器和伪元素选择器的数量(权重值为1)。
e: 通配符选择器(权重值为0)
上述选择器的优先级:a > b > c > d > e
p { /* a=0, b=0, c=1, d=1 */color: red;
}
#header { /* a=0, b=1, c=0, d=0 */background-color: blue;
}
.header { /* a=0, b=0, c=1, d=0 */font-size: 16px;
}
2.源代码顺序(Source Order):如果多个规则的特定性相同,那么后面出现的规则将覆盖先前的规则。这意味着在样式表中后面定义的规则将具有更高的优先级。
p {color: red; /* 这个规则首先出现 */
}p {color: blue; /* 这个规则后出现,将覆盖上一个规则 */
}
3.重要性(!important):如果在规则中使用了 !important,它将覆盖特定性和源代码顺序,成为最高优先级。但是记得不可滥用 !important,因为它会增加代码的维护难度。
p {color: red !important; /* 具有最高优先级 */
}
3.继承性(Inheritance):没有特定性或源代码顺序的概念,但需要注意的是某些样式属性具有继承性,例如字体属性,它们可以从父元素继承到子元素。
以上就是关于 CSS 选择器的内容了,希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师,加油。
最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。