【CSS】CSS常用选择器
DIV
Div是一个html的标签，单独使用没有意义，必须结合CSS使用；
是一个块级元素，单独占一行；
它主要用于页面的布局；
Span
Div是一个html的标签，单独使用没有意义，必须结合CSS使用；
是一个内联元素，显示一行；
它主要用于对括起来的内容进行样式的修饰；
CSS
层叠样式表：同一元素，同一属性，设置不同值；
解决内容与表现分离的问题（html只能将元素展现出来，内容样式无法展示出来），对内容进行修饰；
语法和规范
1. 设置样式
<style></style>
*第一种写法：写在<head></head>内部
*第二种写法：外部引入
<style></style>内部：
（选择器：用于快速查找需要设置样式的元素）
选择器{
属性名1:属性值1;
属性名2:属性值2(;)
}
*最后一个分号可省略
2. 基本选择器
A. 元素选择器：对整体设置样式（div）
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<!--对整体设置样式-->
<style type="text/css">
div{
font-size:50px;
color:pink;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div>
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div>
哈哈哈哈哈44
</div>
<div>
哈哈哈哈哈55
</div>
</body>
</html>
结果：
B. 类选择器：部分设置样式（. class名字）
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<!--部分设置样式-->
<style>
.div2{
font-size: 30px;
color:gold
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div class="div2">
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div class="div2">
哈哈哈哈哈44
</div>
<div>
哈哈哈哈哈55
</div>
</body>
</html>
结果：
C. id选择器：单个设置样式（# id名）
*注意：虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。
例子：
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<!--单个设置样式-->
<style>
#div5 {
font-size: : 30px;
color: yellow;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div class="div2">
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div class="div2" id="div5">
哈哈哈哈哈44
</div>
<div id="div5">
哈哈哈哈哈55
</div>
</body>
结果：
3.其他选择器
D. 通配选择器：选择页面中所有元素
*{
background-color:yellow;
}
E. 后代元素选择器：(祖先元素 后代元素)
例子：选择在<div>中的<p>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p{
font-size:30px;;
color:green;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div>
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div>
<p>
哈哈哈哈哈55
</p>
</div>
<div>
哈哈哈哈哈55
</div>
</body>
结果：
