CSS选择器学习笔记

发布时间：2024-12-27 23:43:43

CSS选择器学习笔记


什么是CSS选择器？



CSS选择器用于选取需要应用样式的HTML元素。
CSS3增加了更多强大的选择器，提高了样式表的灵活性和可维护性。




CSS选择器分类


1. 基础选择器



通配符选择器：* {} 选择所有元素
ID选择器：#id {} 选择id匹配的元素
类选择器：.class {} 选择class匹配的所有元素
标签选择器：p {} 选择所有<p>元素


示例代码：


* {
    margin: 0;
    padding: 0;
}
#header {
    color: blue;
}
.title {
    font-size: 24px;
}




2. 关系选择器



后代选择器：div p {} 选择div内的所有p元素
子元素选择器：div > p {} 仅选择父级div下的直接子元素p
相邻兄弟选择器：div + p {} 选择紧邻div后的第一个p元素
通用兄弟选择器：p ~ ul {} 选择在p之后的所有ul元素


示例代码：


div > p {
    color: green;
}




3. 属性选择器



[attribute]：选择带有该属性的元素
[attribute=value]：选择属性等于特定值的元素
[attribute^=value]：选择以该值开头的元素
[attribute$=value]：选择以该值结尾的元素
[attribute*=value]：选择属性值包含该值的元素


示例代码：


a[href*="example"] {
    color: red;
}




4. 伪类选择器



链接伪类：
:link 未访问的链接
:visited 已访问的链接
行为伪类：
:hover 鼠标悬停时
:active 鼠标点击时
结构伪类：
:first-child 选择第一个子元素
:last-child 选择最后一个子元素
:nth-child(n) 选择第n个子元素
:not(selector) 选择不匹配该选择器的元素


示例代码：


p:first-child {
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
}




5. 伪元素选择器



::before：在元素前插入内容
::after：在元素后插入内容
::first-letter：选择第一个字母
::first-line：选择第一行文本


示例代码：


p::before {
    content: "★ ";
    color: red;
}




总结



熟悉了CSS选择器的基本分类与用法。
掌握了从基础到高级的选择器应用。
了解了如何通过组合和属性选择器实现更精准的样式控制。

评论数：0