文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 CSS 的部分,公众号会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。
CSS3 引入了许多新的选择器,这些选择器增强了样式控制的能力,使得选择元素更加精确和灵活,今天瑶琴带大家来学习或复习这些选择器。
以下是一些常见的CSS3新增的选择器:
1.属性选择器(Attribute Selectors):根据元素的属性值选择元素。
[attribute]:选择具有指定属性的元素。
[attribute="value"]:选择具有指定属性和值的元素。
[attribute^="value"]:选择属性值以指定值开头的元素。
[attribute$="value"]:选择属性值以指定值结尾的元素。
*[attribute="value"]**:选择属性值中包含指定值的元素。
/* 选择所有具有"title"属性的链接元素 */
a[title] {
color: blue;
}
/* 选择所有href属性以"https://"开头的链接元素 */
a[href^="https://"] {
color: green;
}
/* 选择所有class属性包含"btn"的按钮元素 */
button[class*="btn"] {
background-color:#f0f0f0;
}
2.子元素选择器(:nth-child):选择元素的子元素。
:nth-child(n):选择父元素的第n个子元素。
:nth-last-child(n):选择父元素的倒数第n个子元素。
:first-child:选择父元素的第一个子元素。
:last-child:选择父元素的最后一个子元素
/* 选择父元素的第二个子元素 */
div:nth-child(2) {
font-weight: bold;
}
/* 选择父元素的最后一个子元素 */
ul li:last-child {
font-style: italic;
}
3.相邻兄弟选择器(Adjacent Sibling Selector):选择紧接在另一个元素之后的元素。
+:选择紧跟在指定元素之后的同级元素。
/* 选择每个h2元素后的第一个p元素 */
h2 + p {
margin-top: 10px;
}
4.通用选择器(Universal Selector):选择文档中的所有元素。
*:选择所有元素。
/* 选择文档中的所有元素并添加边框 */
* {
border: 1px solid #ccc;
}
5.目标伪类选择器(:target):选择当前活动的目标元素。
:target:选择具有与文档URL中片段标识符匹配的id的元素。
/* 选择具有与URL中片段标识符匹配的id的元素 */
#section1:target {
background-color: yellow;
}
6.空元素选择器(:empty):选择没有任何子元素或文本内容的元素。
:empty:选择空元素。
/* 选择没有子元素或文本内容的空段落 */
p:empty {
display: none;
}
新的 CSS3 选择器使得样式选择更加灵活,避免了之前只能用层层嵌套才能选择到内层元素,这块的内容需要每个初学者都要了解和会使用。
希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师,加油。
最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。