CSS选择器
HTML：定义网页元素
CSS：美化网页元素，控制HTML标签展示样式
CSS与HTML相结合，结合方式如下：
（1）内联样式：CSS代码复用性太低，书写凌乱，不推荐，缺点就是一次只能控制一个标签端的展示样式
（2）内部样式：配合选择器，进行标签的选择，进而对标签进行样式的控制。一次可以控制一个或多个标签的展示样式，复用性高一些。
（3）外部样式：将CSS代码抽取到一个单独的文件中，页面用来引即可，一次可以控制多个页面元素的展示样式，开发首选。
一、ID选择器
id选择器一次只能选择一个标签。
1.<!DOCTYPE html>
2.<html>
3. <head>
4. <meta charset="utf-8">
5. <title></title>
6. <style type="text/css">
7. /*
8. *选择器：就是选中一个或多个标签的一种语法
9. *id选择器 一次只能选中一个标签
10. */
11. #myh1 {
12. color: #0000FF;
13. font-size: 50px;
14. }
15.
16. #myh2 {
17. color: #FF00FF;
18. font-size: 100px;
19. }
20. </style>
21. </head>
22. <body>
23. <!-- id是唯一的 多个标签的id值不要相同 -->
24. <h1 id="myh1">id选择器</h1>
25. <h2 id="myh2">id选择器222222</h2>
26. </body>
27.</html>
二、包含选择器
1.<!DOCTYPE html>
2.<html>
3. <head>
4. <meta charset="utf-8">
5. <title></title>
6. <style type="text/css">
7. #d1 h1 span{
8. color: #C71585;
9. font-size: 20px;
10. }
11. #d2 h2 span{
12. color: #FF0000;
13. font-size: 20px;
14. }
15. h1{
16. color: cyan;
17. font-size: 15px;
18. }
19. </style>
20. </head>
21. <body>
22. <!-- span是行标签 p是块标签 -->
23. <div id="d1">
24. <h1>
25. <span>陕西省</span>
26. </h1>
27. </div>
28. <div id="d2">
29. <h2>
30. <span>西安市</span>
31. </h2>
32. </div>
33. <h1>长安区</h1>
34. <h1>子午大道</h1>
35. <h1>西安邮电大学</h1>
36. </body>
37.</html>
三、标签名选择器
1.<!DOCTYPE html>
2.<html>
3. <head>
4. <meta charset="utf-8">
5. <title></title>
6. <!-- 标签名选择器 一次可以选中多个标签 -->
7. <style type="text/css">
8. h1{
9. color: aquamarine;
10. }
11. font{
12. font-size: 20px;
13. }
14. </style>
15. </head>
16. <body>
17. <h1>标签名选择器1</h1>
18. <h1>标签名选择器1</h1>
19. <h1>标签名选择器1</h1>
20. <h1>标签名选择器1</h1>
21. <h1>标签名选择器1</h1>
22. <h1>标签名选择器1</h1>
23. </body>
24.</html>
四、类选择器
1.<!DOCTYPE html>
2.<html>
3. <head>
4. <meta charset="utf-8">
5. <title></title>
6. <!-- 类选择器 一次可以选取多个标签进行控制 -->
7. <style type="text/css">
8. /* 类选择器 一次可以选取多个标签进行控制 */
9. .myclass1 {
10. color: #FF00FF;
11. font-size: 20px;
12. }
13.
14. #h1 {
15. color: #0000FF;
16. font-size: 20px;
17. }
18. </style>
19. </head>
20. <body>
21. <h1 class="myclass1">类选择器1</h1>
22. <h1 class="myclass1">类选择器1</h1>
23. <h1 class="myclass1">类选择器1</h1>
24. <h1 class="myclass1">类选择器1</h1>
25. <h1 class="myclass1">类选择器1</h1>
26.
27. <h1 id="h1" class="myclass1">类选择器2</h1>
28. </body>
29.</html>
五、属性选择器
<!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>属性选择器</title>
<style type="text/css">
input[type=text]{
width: 37.5rem;
height: 18.75rem;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" placeholder="请输入账号" />
<input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>
</html>六、通配符选择器
<!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>通配符选择器</title>
<style type="text/css">
* {
color: #FF009F;
background-color: #dbcdcd;
font-size: 1.875rem;
}
</style>
</head>
<body>
<ul>
<li>
<a href="">超链接</a>
</li>
</ul>
<p>wxg</p>
<span>高渐离</span>
</body>
</html>七、伪类选择器
伪类选择器最初是针对a标签的，伪类选择器就是选择状态的。
link：连接平常的状态。 active：连接被按下的状态。
visited：连接被访问过之后的状态。 hover：鼠标放到连接上的状态。
超链接标签有四种状态：
（1）链接状态。（2）鼠标悬浮状态。（3）鼠标按下状态。（4）链接访问过后的状态。
其中，鼠标悬浮状态 鼠标按下状态 这两种状态对于其他标签也是有用的。
<!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>伪装选择器</title>
<style type="text/css">
/*
什么是伪类？
伪类用于定义元素的特殊状态。
*/
a{
text-decoration: none;
font-size: 1.875rem;
}
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
img:hover{
width: 600px;
cursor: pointer;
box-shadow: 0px 0px 10px 10px #FF0000;
}
/*
鼠标悬浮样式
这里我们要用cursor属性
cursor 属性规定要显示的光标的类型（形状）。
1、default 默认光标(通常是一个箭头)
2、auto 默认。浏览器设置的光标。
3、crosshair光标呈现为十字线。
4、pointer 光标呈现为指示链接的指针(-只手)
5、move 此光标指示某对象可被移动。
6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。
7、ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。
8、nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。
9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。
10、se-resize此光标指示矩形框的边缘可被向 下及向右移动(南东)。
11、sw-resize此光标指示矩形框的边缘可被向 下及向左移动(南西)。
12、s-resize 此光标指示矩形框的边缘可被向下移动(北西)。
13、w-resize 此光标指示矩形框的边缘可被向左移动(西)。
14、text 此光标指示文本。
15、wait 此光标指示程序正忙(通常是一只表或沙漏)。
16、help 此光标指示可用的帮助(通常是一个问号或-个气球)。
*/
img:active{
border-radius: 50%;
}
</style>
</head>
<body>
<a href="https://space.bilibili.com/480308139">李昊哲-小课</a>
<img src="./img/1.jpg" width="300px" title="点击进入婚礼" >
</body>
</html>八、相邻选择器
相邻兄弟选择器：#d1:hover+div 兄弟选择器：#d1:hover~div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
height: 200px;
width: 200px;
background: red;
}
#d2{
height: 200px;
width: 200px;
background: yellow;
}
/*+ 相邻兄弟选择器 */
/* #d1:hover+div{
background: olivedrab;
} */
/* ~兄弟选择器 */
#d1:hover~div{
background: palevioletred;
}
#d3{
height: 200px;
width: 200px;
background: blue;
}
</style>
</head>
<body>
<div id="d1">
高渐离
</div>
<div id="d2">
卫庄
</div>
<div id="d3">
盖聂
</div>
</body>
</html>
九、选择器的优先级
个选择器，选中了同一标签，控制的样式如果没有冲突，那就叠加生效。
如果说控制的样式之间有冲突时，根据选择器的优先级来，优先级高的选择器它的控制强度就比较大。
内联样式>id选择器>类选择器>标签名选择器
优先级的关系：内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
*多个选择器，选中了同一标签，控制的样式如果没有冲突，那就叠加生效
如果说有冲突时：根据选择器的优先级来的，优先级高的选择器它的控制强度比较大
内联样式>id选择器>类选择器>标签名选择器
优先级关系：内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器
*/
#d1 {
height: 200px;
width: 500px;
}
.divclass {
width: 200px;
background: #0000FF;
}
div {
background: red;
}
</style>
</head>
<body>
<div id="d1" class="divclass" style="background: #7FFF00;height: 500px;">
</div>
</body>
</html>
十、子选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul>li{
color: red;
}
#d1{
color: greenyellow;
}
#sp{
color: #FF0000;
}
#d2>div>#sp1{
color: blue;
}
</style>
</head>
<body>
<div id="d1">
<!-- 子标签没有单独去设置样式，会继承父标签的样式 -->
<span id="sp">陕西省</span>
</div>
<div id="d2">
<div id="">
西安市
</div>
<div id="">
<span>
北京市，大兴区
</span>
</div>
<div id="">
北京市，西城区
</div>
<div id="">
北京北京大学
<span id="sp1">
北京清华大学
</span>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai {
height: 500px;
width: 500px;
background: #ADFF2F;
}
#nei {
height: 250px;
width: 250px;
background: #C71585;
}
#wai:hover>#nei {
background: aqua;
}
#wai1 {
height: 600px;
width: 600px;
background: red;
}
#nei1 {
height: 400px;
width: 400px;
background: #0000FF;
}
#nei2 {
height: 200px;
width: 200px;
background: #555500;
}
#nei1:hover>#nei2 {
background: #00FFFF;
}
#wai1>#nei1>#nei2 {
background: #ffffff;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
</div>
</div>
<div id="wai1">
<div id="nei1">
<div id="nei2">
</div>
</div>
</div>
</body>
</html>
十一、公共选择器
<!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>公共选择器</title>
<style type="text/css">
input[type=text],
input[type=password]{
width: 37.5rem;
height: 18.75rem;
}
input[type=text]{
border: 0.0625rem solid #5B5BEB;
}
input[type=password]{
border: 0.0625rem solid #00FF00;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" placeholder="请输入账号" />
<input type="password" name="" id="" value="" placeholder="请输入密码" />
</body>
</html>十二、后代选择器
<!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>后代选择器</title>
<style type="text/css">
ul a{
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="">00</a>
<ul>
<a href="">11</a>
<a href="">22</a>
<li><span><a href="">33</a></span></li>
<li><span><a href="">44</a></span></li>
</ul>
<a href="">55</a>
</body>
</html>
1934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
