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>