本文介绍了CSS选择器的类型，包括元素选择器、类选择器、ID选择器以及关系选择器（层次选择器）和属性选择器。元素选择器通过标签名选择元素，类选择器和ID选择器则依据类名和ID来定位，关系选择器涉及后代、子代及兄弟标签的选择，属性选择器则基于标签的特定属性来选取目标。此外，还讨论了选择器的优先级和具体使用示例。
css选择器分为：
基本选择器
关系选择器(层次选择器)
属性选择器
基本选择器：
其中有元素选择器、类选择器、id选择器
元素选择器：这里的元素也可以说是标签名，通过标签名来选取网页上所有此类标签进行修饰
用法：元素{
声明1：；
声明2：；
……
}
如图：
h1 {
color: red;
}
/* 该命令是将h1标签内的字体颜色改为红色类选择器：
用法：.类名{
声明1：；
声明2：；
……
}
如图：
.classname{
font-size:28px;
}
/* 该命令是修饰类名为classname的标签中的字体大小，注意别漏了classname前面的小点点id选择器：
用法：#id_name{
声明1：；
声明2：；
……
}
如图
#id_name{
color:blue;
}
/*该命令是将id名为id_name的标签中的内容字体改为蓝色，注意不要省略了前面的#优先级为：id选择器>类选择器>元素选择器
关系选择器(层次选择器)：
分为后代跟子代
后代选择器：
用法：元素1 元素2{
声明1：；
声明2：；
……
}
注意：这里的元素1是元素2的“祖先类“，也就是说元素2在元素1的里面，它们是相当于祖先与后代的关系。
如图
div li{
color:red;
}
/*该命令是将div标签中所有的li标签的文字颜色改为红色子代选择器：
用法：div>li{
声明1：；
声明2：；
……
}
如图：
ol>li{
color:blue;
}
/*该命令是将ol标签下一层的li标签的文字颜色改为蓝色，下下层或在更下层的li标签不被选中而在这里还有两种选择兄弟标签的选择方法：
如图：
ol>.classname+li{
color:blue;
}
/*该选择器选中ol标签下，类名为classname的标签后面的第一个标签名为li的兄弟标签
ol>.classname~li{
color:;blue;
}
/*该选择器选中ol标签下，类名为classname的标签后面的所有标签名为li的兄弟标签属性选择器:
通过标签的属性准确选择修饰的对象
用法：
标签名[属性1][属性2]……{
background-color:yellow;
}
如图:
/*在这里我们用form表单来讲解一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通过属性选择器选中input标签属性为text的标签 */
input[type="text"]{
background-color: blueviolet;
}
/* 但是这样就选中了属性名相同的两个input标签 */
/* 如果要选择第一个input标签要这么写 */
input[type="text"][value="456"]{
background-color: yellow;
}
</style>
</head>
<body>
<form action="">
<input type="text" value="123">
<input type="text" value="456">
</form>
</body>
</html>
838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
