一、初步认识选择器
CSS选择器是指通过CSS样式表，对HTML中的元素进行定义和装饰的方法。
选择器由一些用于指定 HTML 元素的组合而成，这些组合在当前文档中找到一些特定的元素。
在CSS样式表中，常见的选择器有id选择器、class选择器和标签选择器。
/* id选择器 */
#example {
color: red;
}
/* class选择器 */
.example {
color: blue;
}
/* 标签选择器 */
p {
color: green;
}
二、认识选择器组合
可以通过将两个或多个选择器组合在一起来选择特定的HTML元素。
在选择器组合中，多个选择器之间使用空格隔开，表示选择元素的后代关系。
/* 对id为example的元素下的p元素设置字体颜色 */
#example p {
color: red;
}
/* 对class为example的p元素设置字体颜色 */
p.example {
color: blue;
}
三、认识属性选择器
属性选择器可选取带有指定属性的元素。
属性选择器可以带有属性值，以便更精细地选择要渲染的元素。
/* 匹配属性title值为example的a元素 */
a[title="example"] {
color: red;
}
/* 匹配属性值以example开头的a元素 */
a[title^="example"] {
color: blue;
}
四、认识伪类选择器
伪类选择器指的是那些在选择的元素处于某个状态时，才会起作用的选择器。
常见的伪类选择器包括:hover、:active、:first-child等。
/* 鼠标放上去时，字体变为红色 */
a:hover {
color: red;
}
/* 点击过的链接变为灰色 */
a:visited {
color: gray;
}
五、认识伪元素选择器
伪元素选择器用于向某些选择器添加特殊的效果。
常见的伪元素选择器包括::before、::after等。
/* 在p元素之前添加内容 */
p::before {
content: "Hello";
}
/* 在p元素之后添加内容 */
p::after {
content: "World";
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/183254.html
微信扫一扫 
支付宝扫一扫 