CSS-选择器-基础选择器
分类：
基础选择器：
1.基础选择器
1.id选择器：选择器具体的id属性值的元素,建议在一个html页面中id值唯一
语法：#id属性值{}
2.元素选择器：选择具有相同标签名称的元素
语法：标签名称{}
注意：id选择器优先级高于元素选择器
3.类选择器：选择具有相同的class属性值的元素
语法：.class属性值{}
注意：类选择器优先高于元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
#div1{<!--id选择器-->
color: red;
}
div{<!--元素选择器-->
color: #11c900;
}
.cls1{<!--类选择器-->
color: blue;
}
</style>
</head>
<body>
<!--基础选择器-->
<!--1.基础选择器
1.id选择器：选择器具体的id属性值的元素,建议在一个html页面中id值唯一
语法：#id属性值{}
2.元素选择器：选择具有相同标签名称的元素
语法：标签名称{}
注意：id选择器优先级高于元素选择器
3.类选择器：选择具有相同的class属性值的元素
语法：.class属性值{}
注意：类选择器优先高于元素选择器
-->
<div id="div1">伟明老婆</div>
<div>伟明二老婆</div>
<p class="cls1">伟明三老婆</p>
</body>
</html>
CSS-选择器-扩展选择器
1.选择所有元素：
语法：* {}
2.并集选择器：
语法：选择器1，选择器2 {}
3.子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2 {}
4.父选择器：筛选选择器2的父元素选择器1
语法：选择器1 > 选择器2 {}
5.属性选择器：选择元素名称，属性名=属性值的元素
语法：元素名称【属性名="属性值"】{}
6.伪类选择器：选择一些元素具有的状态
语法：元素：状态{}
如：<a>
状态：
link：初始化状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
div p{/*子选择器 */
color: red;
}
div > p{ /*父选择器*/
border: 1px solid;
}
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>
<div>
<p>伟明大老婆</p>
</div>
<p>伟明情人</p>
<input type="text"><br>
<input type="password"><br>
<a href="#">百度</a>
</body>
</html>
标签：color,元素,扩展,语法,伟明,选择器,CSS,属性 From： https://www.cnblogs.com/qihaokuan/p/16827685.html