一、id选择器
1、格式：#id名称{属性：值}
2、注意点：html的每个标签都有id属性，同一页面的id值不能一样；id只能是字母、数字、下划线，不能以数字开头；id一般是给js使用的
二、类选择器
1、格式：.类名{属性：值}
2、每个html标签都有class属性，在同一界面中类名可以重复
3、class命名规范和id一样
4、类名是用来给某个特定标签设置样式的
5、在html中每个标签可以同时绑定多个类名
格式：<p class=" 类名1 类名2">测试</p>
小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style type="text/css">
.colorR{
color: red;
}
.font30{
font-style: 30;
}
.line{
text-decoration: underline;
}
</style>
</head>
<body>
<p class="colorR font30 line">哈哈哈</p>
<p class="colorR font30 line">哈哈哈3</p>
<p class="colorR font30">哈哈哈5</p>
<p class="colorR font30">哈哈哈8</p>
</body>
</html>三、后代选择器
1、作用：找到指定标签的所有后代标签，设置属性
2、格式：标签名称1 标签名称2{属性：值} 先找到标签1，再在标签 1下面去找标签2，然后设置属性
3、注意点：后代选择器必须用空格隔开，只要放在指定标签中的都是后代；后代选择器不仅可以使用标签，还可以使用id、class等其它选择器
四、子元素选择器
1、作用：找到指定标签中所有的直接子元素，然后设置属性
2、格式：标签名称1>标签名称2{属性：值} 先找到标签1，在找到标签名称1下面的直接子元素标签名称2
3、子元素选择器之后查找儿子，不会查找其它被嵌入的标签；子元素选择器之间只能用>连接，不能用空格；子元素选择器不仅可以使用标签，还可以使用id、class等其它选择器
例如：
<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
div>p{
color: red;
}
</style>
</head>
<body>
<p>123</p>
<div>
<p>123456</p>
<p>1234567</p>
<ul>
<li>
<p>oooo</p>
</li>
</ul>
</div>
<p>999</p>
</body>
</html>五、交集选择器
1、作用：给所有选择器选中的标签中，相交的那部分标签设置属性
2、格式：选择器1选择器2{属性：值}
3、注意点：选择器和选择器之间没有任何连接符号;用得少
例如：
<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
p.para1{
color: red;
}
p#id1{
color: blue;
}
</style>
</head>
<body>
<p class="para1">嘿嘿1</p>
<p class="para1">嘿嘿2</p>
<p id="id1">嘿嘿3</p>
<p>嘿嘿4</p>
</body>六、并集选择器
1、作用：给所有选择器选中的标签设置属性
2、格式：选择器1，选择器2{属性：值}
3、注意点：选择器与选择器之间用逗号隔开
例如：
<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
.para1,.para2{
color: red;
}
</style>
</head>
<body>
<p class="para1">嘿嘿1</p>
<p class="para2">嘿嘿2</p>
<p id="id1">嘿嘿3</p>
<p>嘿嘿4</p>
</body>七、兄弟选择器
1、相邻的兄弟选择器：给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式：选择器1+选择器2{属性：值}
注意点：相邻兄弟选择器只能选中紧跟其后的标签
例如：ooo和咿呀1变红
<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
h1+p{
color: red;
}
</style>
</head>
<body>
<h1>哈哈</h1>
<p>ooo</p>
<p>eee</p>
<p>kkk</p>
<h1>嘿嘿</h1>
<p>咿呀1</p>
<p>咿呀2</p>
<p>咿呀3</p>
</body>2、通用选择器：给指定选择器后面的所有选择器中的所有标签设置属性
格式：选择器1~选择器2{属性：值}
例如：
<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
h1~p{
color: red;
}
</style>
</head>
<body>
<h1>哈哈</h1>
<a href="#">超链接</a>
<p>ooo</p>
<p>eee</p>
<p>kkk</p>
<h1>嘿嘿</h1>
<p>咿呀1</p>
<p>咿呀2</p>
<p>咿呀3</p>
</body>八、序选择器
1、同级别的第几个
first-child:同级别的第一个标签
last-child:同级别的最后一个标签
nth-child(n):同级别的第n个标签
nth-of-type(n):同级别的倒数第n个标签
nth-child(odd):同级别的所有奇数
nth-child(even):同级别的所有偶数
nth-child(xn+y):自定义同级别的标签，n从0开始递增
only-child:选中父元素的唯一子元素
注意点：数是第几个的时候不区分类型
<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
p:first-child{
color: red;
}
</style>
</head>
<body>
<p>开始1</p>
<p>开始2</p>
<p>开始3</p>
<div>
<p>咿呀1</p>
<p>咿呀2</p>
<p>咿呀3</p>
</div>
<p>结束</p>
</body>2、同类别的第几个
first-of-type:同级别同类型的第一个
last-of-type:同级别同类型的最后一个
nth-of-type(n):同级别同类型的第n个
nth-last-of-type(n):同级别同类型的倒数第n个
nth-of-type(odd):同级别同类型的所有奇数
nth-of-type(even):同级别同类型的所有偶数
only-of-type:选中父元素的唯一类型的某个标签
p:first-of-type{
color: blue;
}九、属性选择器
1、格式1：[attribute] 根据指定的名称找到对应的标签设置属性
p[id]{
color: red;
}2、格式2：[attribute:value] 找到指定属性，并且该属性的值为value的标签，然后赋值;最常见的应用场景就是用于区分input属性
p[class=cc]{
color: blue;
}3、属性的取值是以什么开头的
[attribute|=value] css2
[attribute^=value] css3
css2中的只能找到value开头并且value是被-和其它内容隔开的
css3中的只要是value开头的都能找到
img[alt^=a]{
color: red;
}4、属性的取值是以什么结尾的
[attribute$=value] css3
5、属性的取值是否包含某个特定的值
[attribute~=value] css2
[attribute*=value] css3
6197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
