扩展选择器:
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</title>
<style>
div{
color: red;
}
p{
color: blue;
}
/*子选择器*/
div p{
color: purple;
}
/*父选择器*/
div>p{
font-size: 20px;
}
/*并集选择器*/
h1,h2,h3{
color: gold;
}
/*属性选择器*/
input[type="text"]{
border: 5px solid;
}
</style>
</head>
<body>
<!--
1. 扩展选择器:
1. 选择所有元素:
* 语法: *{}
2. 并集选择器:
* 选择器1,选择器2{}
3. 子选择器:筛选选择器1元素下的选择器2元素
* 语法: 选择器1 选择器2{}
4. 父选择器:筛选选择器2的父元素选择器1
* 语法: 选择器1 > 选择器2{}
5. 属性选择器:选择元素名称,属性名=属性值的元素
* 语法: 元素名称[属性名="属性值"]{}
6. 伪类选择器:选择一些元素具有的状态
* 语法: 元素:状态{}
* 如: <a>
* 状态:
* link:初始化的状态
* visited:被访问过的状态
* active:正在访问状态
* hover:鼠标悬浮状态
-->
<!--子选择器-->
<div>
<p>纯音乐</p>
</div>
<!--父选择器-->
<!--并集选择器-->
<h1>我是h1</h1>
<h2>我是h2</h2>
<h2>我是h3</h2>
<!--属性选择器-->
<input type="text">
<input type="password">
</body>
</html>