CSS（二）：选择器
一、基本选择器
1、标签选择器
HTML标签作为标签选择器的名称，例如<h1>~<h6>、<p>等。
语法：
p{font-size: 16px;}
p：标签选择器。
font-size: 16px; 声明。
font-size:属性。
16px 属性值。
示例：
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>基本选择器</title> 6 <style type="text/css"> 7 /*多行注释：标签选择器*/ 8 p{ 9 color: red; 10 } 11 h1{ 12 font-weight: normal; 13 font-size: 12px; 14 } 15 </style> 16 </head> 17 <body> 18 <p>我是p标签</p> 19 <h1>我是h1标签</h1> 20 </body> 21 </html>
效果：
2、类选择器
语法：
.class {font-size:16px;}
.class：类选择器。
class：类名称。
font-size:16px;声明。
font-size：属性。
16px：属性值。
注意：
类选择器一定以"."开头，后面跟类名。
使用类选择器：
<标签名 class="类名称">标签内容</标签名称>
注意：
网页中可给不同标签使用相同的class。
示例：
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>类选择器</title> <style type="text/css"> /*类选择器：.class*/ .box{ font-weight: bold; font-size: 16px; color: blue; } </style> </head> <body> <div class="box">我是DIV</div> </body> </html>
效果：
3、ID选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
语法：
#id名称{声明}
注意：
ID选择器以“#”开头，后面跟选择器名称.
#id {font-size:16px;}
#id：ID选择器。
id：id名称。
font-size:16px;声明。
font-size：属性。
16px：属性值。
使用ID选择器：
<标签名 >标签内容</标签名>
注意：
网页中标签的ID不能重复，唯一存在。
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>类选择器</title> <style type="text/css"> /*ID选择器：.#ID名称*/ #small{ background: red; font-size: 20px; } </style> </head> <body> <span >我是span标签</span> </body> </html>
效果：
在现代布局中，id选择器常常用于建立派生选择器
例如：
#sidebar p{ font-style: italic; text-align: right; margin-top: 1em; }
上面的样式只会应用于出现在id是sidebar的元素内的段落。
即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次。
例如：
#sidebar p{ font-style: italic; text-align: right; margin-top: 1em; } #sidebar h2{ font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: center; }
在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。
二、复合选择器
1、并集选择器（又称群组选择器）
示例
p,#id,.class{
font-weight: normal;
font-size: 12px;
}
经验：
1、多个选择器之间可以是多个不同或相同的类型。
2、多个选择器之间必须使用英文半角输入法逗号","隔开。
示例：
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>类选择器</title> <style type="text/css"> /* 实现效果：文字都是红色*/ /* 实现方式1：使用各自的选择器实现*/ /* h3{ color: red; } .two{ color: red; } p{ color: red; } #four{ color: red; }*/ /*实现方式2：使用并集选择器，可以减少代码的书写*/ h3,.two,p,#four{ color: red; } /*使用了并集选择器之后，还可以在单独设置p标签*/ p{ font-size: 50px; } </style> </head> <body> <h3>第一个标题</h3> <h2 class="two">第二个标题</h2> <p>第二段文字内容</p> <h1 >第三个标题</h1> </body> </html>
效果：
2、交集选择器(指定标签选择器)
语法：
h3.second{
font-size:14px;
color:green;
}
经验：
1、格式为:标签+类选择器 或 标签+ID选择器。
2、选择器之间不能有空格。
示例：
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>交集选择器（指定标签选择器）</title> </head> <body> <h3>第一个标题</h3> <h3 class="two">第二个标题</h3> <p class="two">第二段文字内容</p> <h1 >第三个标题</h1> </body> </html>
a、先定义一个h3选择器，字体颜色为blue：
h3{
color: blue;
}
这是查看效果：
这是所有的h3标签的字体颜色都会变成蓝色，这并不是我们想要的效果。
b、定义类选择器：
.two{
color: blue;
}
这是在查看网页效果：
这是所有class为two的标签的字体颜色都变为了蓝色。
c、定义交集选择器
h3.two{
color: blue;
}
这是在查看网页的效果：
这时会发现，只有第二个h3标签的字体颜色变成了蓝色，其他标签的字体颜色不会变。
完整示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>交集选择器(指定标签选择器)</title> <style type="text/css"> /*所有h3标签的文字都会变成蓝色*/ /* h3{ color: blue; } */ /*所有class为two的标签的字体颜色都变成了蓝色*/ /* .two{ color: blue; } */ /*读法：名字为two的h3标签 只有第二个h3标签的字体颜色才会变成蓝色,p标签的颜色不会变 写法：标签+类选择器 */ h3.two{ color: blue; } /* 读法：名字为two的p标签 只有p标签的字体颜色才会变成黄色，h3标签的颜色不会变 */ p.two{ color: yellow; } /* 写法：标签+ID选择器 */ h1#four{ color: green; } </style> </head> <body> <h3>第一个标题</h3> <h3 class="two">第二个标题</h3> <p class="two">第二段文字内容</p> <h1 id="four">第三个标题</h1> </body> </html>
效果：
3、后代选择器
语法：
p a{
font-size:14px;
color:green;
}
经验
1、选择器之间可以是多个不同或相同类型并有层级关系的；
2、选择器之间用空格隔开；
3、格式：标签 标签选择器或标签 类选择器或标签 ID选择器。
示例：
先定义如下的HTML结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>后代选择器</title> </head> <body> <div class="box"> <h3>hello</h3> <p>欢迎大家</p> <p>一起学习进步!</p> </div> <h3>Hello World</h3> </body> </html>
效果：
要实现的效果：Div里面的h3标签的字体变为红色，和DIV平级的h3标签的字体颜色不变。
如果定义h3标签字体样式为红色：
h3{
color: red;
}
效果：
这时会发现所有的h3标签的字体颜色都变为了红色。
这时可以使用下面的样式：
div h3{
color: red;
}
效果：
这样就只有DIV里面的h3标签的字体颜色变成红色。
如果在DIV的p标签里面又添加了一个h3标签会是什么效果呢？HTML结构如下：
<div class="box"> <h3>hello</h3> <p>欢迎大家</p> <p>一起学习进步! <h3>我的p标签下面的h3</h3> </p> </div> <h3>Hello World</h3>
效果：
说明：
只要h3在DIV里面，无论是直属的子级，或者是子级的子级，都会应用该样式。
在看下面的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>后代选择器</title> <style type="text/css"> /* 所有的h3标签的字体都会变成红色 */ /* h3{ color: red; } */ div h3{ color: red; } div .first{ font-weight: bold; color: yellow; } </style> </head> <body> <div class="box"> <h3>hello</h3> <p class="first">欢迎大家</p> <p>一起学习进步! <h3>我的p标签下面的h3</h3> </p> </div> <h3>Hello World</h3> </body> </html>
效果：
.
三、通配选择器
使用*表示通配选择器，表示所有标签都应用该样式。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>通配选择器</title> <style type="text/css"> *{ color: red; } </style> </head> <body> <div class="box"> <h3>hello</h3> <p class="first">欢迎大家</p> <p>一起学习进步! <h3>我的p标签下面的h3</h3> </p> </div> <h3>Hello World</h3> </body> </html>
效果：
练习：
实现如下的网页样式：
HTML代码结构如下：
“如梦令”为h3标签且class为title。
“译文”为h3标签且id为translation。
诗词和翻译段落都为p标签，但翻译段落的class为second。
要去：
1、“如梦令”和“译文”字体大小为20px；
2、“译文”字体颜色为蓝色。
3、翻译段落的字体颜色为绿色。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS练习</title> <style type="text/css"> h3{ font-size: 20px; } /*交集选择器（指定标签选择器）*/ /*id为translation的h3标签的字体颜色为蓝色*/ h3#translation{ color: blue; } /*class为second的p标签的字体颜色为绿色*/ p.second{ color: green; } </style> </head> <body> <h3 class="title">如梦令</h3> <hr /> <p> 昨夜雨疏风骤，浓睡不消残酒。<br /> 试问卷帘人，却道"海棠依旧"。<br /> "知否?知否?应为绿肥红瘦" </p> <h3 id="translation">译文</h3> <p class="second"> 昨夜雨点稀疏，晚风急猛，我虽然睡了一夜，<br /> 扔有余罪未消。试问卷帘的侍女：海棠花怎么<br/> 样？她说海棠花依然如旧。知道吗？知道吗？<br /> 应是绿叶繁茂，红花凋零。 </p> </body> </html>
效果：
三、选择器优先级
1、标签选择器和类选择器比较
看下面的示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标签选择器和类选择器优先级比较</title> <style type="text/css"> /*标签选择器*/ h2{ color: red; } /*类选择器*/ .first{ color: blue; } </style> </head> <body> <h2>标签选择器</h2> <h2 class="first">类选择器</h2> </body> </html>
效果：
从截图中可以看出：类选择器的优先级高于标签选择器。
注意：
更换<style>标签中标签选择器和类选择器的先后顺序得到的结果也是一样的。
2、标签选择器和ID选择器的比较
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标签选择器和ID选择器的比较</title> <style type="text/css"> /*标签选择器*/ h2{ color: red; } /*id选择器*/ #first{ color: blue; } </style> </head> <body> <h2>标签选择器</h2> <h2 id="first">id选择器</h2> </body> </html>
效果：
从图中可以看出：id选择器的优先级高于标签选择器。
3、类选择器和id选择器的比较
看下面的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>类选择器和ID选择器的比较</title> <style type="text/css"> /*类选择器*/ .first{ color: red; } /*id选择器*/ #second{ color: blue; } </style> </head> <body> <h2 class="first" id="second">类选择器和id选择器优先级比较</h2> </body> </html>
效果：
从截图中可以看出：id选择器的优先级高于类选择器。
总结：
基本选择器的优先级：ID选择器>类选择器>标签选择器。