ID
id是用于给标签加入标记的
注：各个ID不能重复 一个标签只能有一个ID
<p id="p1">哒哒哒哒哒哒</p>
这里 为p标签加入叫做p1的ID
类(class)
当多个标签需要进行相同的操作的时候 可以用class标记
类用于标记多个标签 同一个类名可以标记多个标签 一个元素可以有多个类名
<p class="p2 p3">哒哒哒哒哒哒</p>
<div class="p2">哒哒哒哒哒哒</div>
<span class="p3">哒哒哒哒哒哒</span>
这里为p和span / p和div设置为同一个类 p同时有两个类名
选择器
class和id选择器 (css中的操作)
class选择器
即选定对应类名进行操作
语法
. 类名{} (前面一个.符号 后面紧挨着类名)
.p2{
font-size: 20px;/*选择类的格式 .class*/
}
为class=p2的标签设置样式
Id选择器
即选定对应的ID进行操作
#p1{
color: aquamarine;
font-size: 10px;/*选择ID的格式#id*/
}
为ID=p1的标签设置样式
并集选择器
可以理解为数学中的并集
#p1,.p2,.p3{
background: palevioletred;
}/*并集选择器 符合以上三个任意一个条件的都可选择*/
直接前面写上#p1(选择id=p1)，.p2(class=p2)，.p3(class=p3)选定这三个直接不管是类还是ID全一下子选上
交集选择器 (也叫复合选择器)
可以理解为数学中的交集
复合选择器即交集选择器 选择同时满足过个条件的元素 与并集选择器的写法差别在于 并集中多个条件需要逗号隔开 交集需要各个条件挨着
span.p4{
font-size: 30px;
}
这里是选定标签为span且类为p4的标签
无敌选择器
*{
background: darkgoldenrod;
}/* *号是选择全部的元素 */
加个*号表示选择全部标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
#p1{
color: aquamarine;
font-size: 10px;/*选择ID的格式#id*/
}
.p2{
font-size: 20px;/*选择类的格式 .class*/
}
.p3{
color: red;
}
#p1,.p2,.p3{
background: palevioletred;
}/*并集选择器 符合以上三个任意一个条件的都可选择*/
*{
background: darkgoldenrod;
}/* *号是选择全部的元素 */
span.p4{
font-size: 30px;
}/*复合选择器即交集选择器 选择同时满足过个条件的元素
与并集选择器的写法差别在于 并集中多个条件需要逗号隔开
交集需要各个条件挨着*/
</style>
</head>
<body>
<p id="p1">哒哒哒哒哒哒</p>
<p class="p2 p3">哒哒哒哒哒哒</p>
<!--
一个元素可以有多个类名
-->
<p class="p2">哒哒哒哒哒哒</p>
<p class="p3">哒哒哒哒哒哒</p>
<p>哒哒哒哒哒哒</p>
<span id="2" class="p4">来嘛来嘛</span>
<p class="p4">来了来了</p>
</span>
</body>
</html>