目录
一、标签选择器
作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式: 标签名称{ 属性:值; }
注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器 */
div{
color: aqua;
font-size: 28px;
}
</style>
</head>
<body>
<div>我是一个div
<div>我是子元素
<div>我是孙子元素</div>
</div>
</div>
</body>
</html>
二、id和class选择器
- id选择器
作用: 根据指定的id名称找到对应的标签, 然后设置属性
格式: #id名称{ 属性:值; }
注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称是有一定的规范的
4.1 id的名称只能由字母/数字/下划线，a-z 0-9 _
4.2 id名称不能以数字开头
4.3 id名称不能是HTML标签的名称，不能是a h1 img input ...
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的
- 类选择器
作用: 根据指定的类名称找到对应的标签, 然后设置属性 格式: .类名{ 属性:值; }
注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名 格式: <标签名称 class="类名1 类名2 ..."> 错误的写法:
<p class="para1" class="para2">
7.id和class的区别? 7.1 id相当于人的身份证不可以重复 class相当于人的名称可以重复
7.2 一个HTML标签只能绑定一个id名称 一个HTML标签可以绑定多个class名称
8.id选择器和class选择器区别? id选择器是以#开头 class选择器是以.开头
9.在企业开发中到底用id选择器还是用class选择器? id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式
10.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平 一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后 让标签和这个类选择器绑定即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* id选择器 给一个标签设置样式 #+id */
#div1{
background-color: red;
}
/* 类选择器 给一类标签设置样式 .类名 */
.div3{
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">我是一个div</div>
<div id="div2">我是一个div</div>
<div class="div3">我是一个div</div>
<!-- 设置多个类名 空格隔开 -->
<div class="div3 div4">我是多类名div</div>
</body>
</html>、 
三、后代和子元素选择器
- 后代选择器
作用: 找到指定标签的所有特定的后代标签, 设置属性
格式:
标签名称1 标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性 例如：div p{}
注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去
- 子元素选择器
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式: 标签名称1>标签名称2{
属性:值; }
注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
5.后代选择器和子元素选择器之间的区别?
-后代选择器使用空格作为连接符号 子元素选择器使用>作为连接符号 -后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标 签中的特 定标签都会被选中 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
6.后代选择器和子元素选择器之间的共同点 -后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器 -后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去 选择器1>选择器2>选择器3>选择器4{}
7.在企业开发中如何选择 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代(子代+其他后代)选择器 空格隔开 */
/* div p{
color: red;
} */
/* 子代 子元素选择器 >隔开(直接子代 不包括其他后代) */
.div1>p{
color: red;
}
</style>
</head>
<body>
<div class="div1">
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</div>
</div>
</body>
</html> 
四、交集和并集选择器
- 交集选择器
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
格式: 选择器1选择器2{
属性: 值; }
注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称
3.交集选择器仅仅作为了解, 企业开发中用的并不多
- 并集选择器
作用: 给所有选择器选中的标签设置属性
格式: 选择器1,选择器2{
属性:值; }
注意点:
1.并集选择器必须使用,来连接
2.选择器可以使用标签名称/id名称/class名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 交集选择器 */
/* 标签选择+类选择器 */
/* p.p1{
color: red;
} */
/* 并集选择器 */
.p1,#p2{
color: blue;
}
</style>
</head>
<body>
<p class="p1">第1个标签</p>
<p id="p2">第2个标签</p>
<p>第3个标签</p>
<p>第4个标签</p>
</body>
</html>
五、兄弟选择器
（一）相邻兄弟选择器 CSS2
作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:
选择器1+选择器2{
属性:值; }
注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
（二）通用兄弟选择器 CSS3
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
格式: 选择器1~选择器2{
属性:值; }
注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 兄弟选择器 -->
<style>
/* css2选择器 */
/* .p1+p{
color: yellow;
} */
/* css3选择器 */
.p1~p{
color:pink;
}
</style>
</head>
<body>
<p class="p1">第1个标签</p>
<p>第2个标签</p>
<p>第3个标签</p>
<p>第4个标签</p>
<p>第5个标签</p>
</body>
</html> 
六、序选择器（结构伪类选择器）
CSS3中新增的选择器最具代表性的就是序选择器
1.同级别中的第几个 :
first-child 选中同级别中的第一个标签 :
last-child 选中同级别中的最后一个标签 :
nth-child(n) 选中同级别中的第n个标签 :
nth-child(odd) 选中同级别中的所有奇数 :
nth-child(even) 选中同级别中的所有偶数 :
nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增
例如(3n+1)分别对应1,4,7..... :
nth-last-child(n) 选中同级别中的倒数第n个标签 :
only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效
注意点: 不区分类型
2.同级别同类型中的第几个 :
first-of-type 选中同级别中同类型的第一个标签 :
last-of-type 选中同级别中同类型的最后一个标签 :
nth-of-type(n) 选中同级别中同类型的第n个标签 :
nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 :
only-of-type 选中父元素的特定类型的唯一子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 伪类选择器 使用范围:同级别*/
p:first-child{
color: aqua;
}
p:last-child{
color: blueviolet;
}
p:nth-child(5){
color: blue;
}
p:nth-child(odd){
color: brown;
}
p:nth-child(even){
color: chartreuse;
}
p:nth-child(3n+1){
/* 3n+1 1 4 7 */
color: blanchedalmond;
}
/* 同级别同类型 第一个 */
div:first-of-type{
color: red;
}
</style>
</head>
<body>
<p>第1个标签</p>
<p>第2个标签</p>
<p>第3个标签</p>
<p>第4个标签</p>
<p>第5个标签</p>
<p>第6个标签</p>
<p>第7个标签</p>
<p>第8个标签</p>
<!-- <div>我是一个div</div> -->
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>
</html>
七、动态伪类选择器
E:link（链接伪类选择器）：
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接 描点上 E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于 链接描点上
E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。
IE6及以下浏览器仅支持 a:hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 动态伪类 -->
<style>
/* 如果连接没被访问过 */
a:link{
color: black;
}
/* 用户已经访问过 */
a:visited{
color: red;
}
/* 鼠标悬浮 */
a:hover{
color: yellow;
}
/* 鼠标按住不动 */
a:active{
color: blue;
}
/* link visited hover active */
/* 否定伪类:not(类名) */
p:not(.p2){
color:red;
}
</style>
</head>
<body>
<a href="https//www.baidu.com">百度一下，你就知道</a>
<p>第1个标签</p>
<p class="p2">第2个标签</p>
<p>第3个标签</p>
<p>第4个标签</p>
</body>
</html> 
八、伪元素选择器
使用伪元素来表示元素中的一些特殊的位置
::after
表示元素的最后边的部分
一般需要结合content这个样式一起使用，
通过content可以向after的位置添加一些内容
::before
表示元素最前边的部分
一般需要结合content这个样式一起使用，
通过content可以向before的位置添加一些内容
::first-letter
为第一个字符来设置一个样式
::first-line
为第一行设置一个样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 伪元素选择器 */
p::after{
content: '::after';
}
p::before{
content: '::我是before';
}
/* 首字符样式 */
p::first-letter{
color: red;
font-size: 28px;
}
/* 首行文字样式 */
p::first-line{
color: aqua;
}
</style>
</head>
<body>
<p>我是一个段落标签我是一个段落标签我是一个段落标签我是一个段落标签我是一个段落标签<br>
签我是一个段落标签我是一个段落标签我是一个段落标签我是一个段落标签我是一个段落标签</p>
</body>
</html>
九、属性选择器
作用: 根据指定的属性名称找到对应的标签, 然后设置属性
格式:
[attribute]
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">-属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
<input type="text" name="user-name" id="">
<input type="password" name="username" id="">两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
-属性的取值是以什么结尾的
[attribute$=value] CSS3
-属性的取值是否包含某个特定的值
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的 CSS3中的只要包含value就可以找到
十、通配符选择器
作用: 给当前界面上所有的标签设置属性
格式: *{
属性:值; }
注意点: 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上 的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
扫一扫
1333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
