1基本选择器
1.1基本选择器的基本语法结构
选择器{
属性：属性值;
属性：属性值;
属性：属性值;
}
1.2标签选择器
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
div{
color:yellowgreen;
}
</style>
</head>
<body>
<div id="yaya">你好世界！</div>
</body>
</html>结果:
你好世界！
1.3id选择器
1.id选择器是用于选择标签中指定了id属性并指定值的元素。
2.它的语法为：#id的值{}
3.相同名称的id值在同一页面中只能有一个(必须唯一)。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
ul{
color:deepskyblue;
}
</style>
</head>
<body>
<p id="first">我爱重庆</p>
<ul>
<p id="first">重庆</p>
</ul>
</body>
</html>结果：我爱重庆
重庆
1.4类选择器
1.类选择器需要在标签上定义 class 属性，并指定值，然后让这个值作为选择器来使用。
2.类选择器是以 . 开头。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.container{
color:red;
}
</style>
</head>
<body>
<div class="container">
这是div窗口中的内容。
</body>
</html>结果：这是div窗口中的内容。
ps:标题基本选择器的优先级
上述四种基本选择器是有优先级的喔！
优先级：
id选择器 > 类选择器 > 标签选择器 >通用选择器
2.包含选择器
2.1子代选择器
获取某个标签的第一级子标签。
2.2后代选择器
获取某个标签里的所有子标签。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
div p{
background-color:gray;
}
div>p{
background-color:aquamarine;
}
</style>
</head>
<body>
<div>
div容器
<h2>
<p>h2中的p标签内容</p>
</h2>
<p>
这是一个段落
</p>
</body>
</html>
结果：
div 容器
h2中的p标签内容
这是一个段落
2.3分组选择器
逗号选择器，使用逗号给多个标签设置样式。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分组选择器</title>
<style>
.name,#myprograme,h1{
color: red
}
</style>
</head>
<body>
<h1>这是一个标签嘿嘿</h1>
<hr>
<div class="user">
<ul>
<li>这是数据</li>
<li>这是数据</li>
<li>这是数据</li>
</ul>
<li>这也是数据</li>
<li>这也是数据</li>
<li>这也是数据</li>
</div>
</body>
</html>
结果：
这是一个标签嘿嘿
- 这是数据
- 这是数据
- 这是数据
- 这也是数据
- 这也是数据
- 这也是数据
PS:
①后代选择器的格式：
选择器1 选择器2 {
属性：值；
}
②子代选择器的格式：
选择器1>选择器2{
属性：值；
}
③后代选择器和子代选择器的区别：
后代选择器是获取选择器1的所有后代中名称为选择器2的元素，而子代选择器只会获取选择器1的第一层中的选择器2所对应的元素。
应用得最广泛的三种选择器：
1）标签选择器（根据标签名获取）
2）id选择器（根据id属性进行获取）
3）类选择器（class属性进行获取）
标签，id和类选择器的使用场景：
1. 当希望页面中所有指定的标签都使用相同样式时，就可以使用标签选择器。
2.当希望某一元素具有指定样式时，就可以使用id选择器。
3.当希望多种标签都使用指定样式时，就可以使用类选择器。
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
