格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器:筛选具有相似特征的元素
注意：每一对属性需要使用；隔开，最后一对属性可以不加；
1）id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
语法：#id属性值{}
2）元素选择器：选择具有相同标签名称的元素
语法： 标签名称{}
注意：id选择器优先级高于元素选择器、高于类选择器
3）类选择器：选择具有相同的class属性值的元素。
语法：.class属性值{}
注意：类选择器选择器优先级高于元素选择器
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
.cls1{
color: blue;
}
div{
color:green;
}
#div1{
color: red;
}
</style>
</head>
<body>
<div id="div1">id选择器</div>
<div >元素选择器</div>
<p class="cls1">类选择器</p>
</body>
</html>
结果：
1）选择所有元素：
语法： *{}
2) 并集选择器：
语法：选择器1,选择器2{}
3) 子选择器：筛选选择器1元素下的选择器2元素
语法： 选择器1 选择器2{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
div p{
color:red;
}
</style>
</head>
<body>
<div>
<p>段落一</p>
</div>
<p>段落二</p>
</body>
</html>
结果：
4）父选择器：筛选选择器2的父元素选择器1
语法： 选择器1 > 选择器2{}
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
div p{
color:red;
}
/*选择p标签的div 加一个框*/
div > p {
border: 1px solid;
}
</style>
</head>
<body>
<div>
<p>段落一</p>
</div>
<p>段落二</p>
<div>aaa</div>
</body>
</html>
结果：
5）属性选择器：选择元素名称，属性名=属性值的元素（一般用于选择input标签）
语法： 元素名称[属性名="属性值"]{}
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
/*属性选择器匹配type=‘text‘ 加边框为5px，type="password"未匹配*/
input[type=‘text‘]{
border: 5px solid;
}
</style>
</head>
<body>
<input type="text" >
<input type="password" >
</body>
</html>
结果：
6）伪类选择器：选择一些元素具有的状态
语法： 元素:状态{}
如： <a>
状态：link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
例子：创建一个超链接，初始化为粉色，鼠标悬浮为绿色，鼠标点击之后为黄色，访问过之后为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
input[type=‘text‘]{
border: 5px solid;
}
/*初始状态：粉色*/
a:link{
color: pink;
}
/*鼠标悬浮*/
a:hover{
color: green;
}
/*鼠标点击完之后*/
a:active{
color: yellow;
}
/*鼠标访问之后*/
a:visited{
color: red;
}
</style>
</head>
<body>
<br> <br> <br> <br>
<a href="https://www.baidu.com/">超链接</a>
</body>
</html>
结果：
原文：https://www.cnblogs.com/nanao/p/15239611.html