3、CSS基本选择器
CSS基本选择器
选择器：大括号前的那个东西
作用：通过选择器可以找到html里对应的元素，并把选择器后面的样式传递给元素。
选择器的分类（4大类）
-
基本选择器
- 通配符（*）选择器
- 标签选择器
- id选择器
- 类型（class）选择器
-
组合选择器
-
属性选择器
-
伪元素选择器
基本选择器——通配符选择器
-
代码：
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通配符选择器</title> <link rel="stylesheet" href="TongPeiFu.css"> </head> <body> <div> div1 <div>div2</div> <p>p1</p> </div> </body> </html>css
/*通配符选择器（*）对所有元素都生效*/ * { border: 1px solid black; }效果：
![]()
基本选择器——标签选择器
-
代码
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <link rel="stylesheet" href="BiaoQian.css"> </head> <body> <div> div1 <div>div2</div> <p>p1</p> </div> </body> </html>css
/*标签选择器只对选择器指定的标签生效*/ div { border: 1px solid black; }效果：
这里< p > 标签的内容没有边框，css样式只作用于< div > 标签。
![]()
基本选择器——id选择器
-
代码
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <link rel="stylesheet" href="id.css"> </head> <body> <div> div1 <div id="div2">div2</div> <p>p1</p> </div> </body> </html>css
/*id选择器只对与选择器有对应id属性值的标签生效*/ /*id选择器由 #+id 组成*/ #div2 { font-size: 60px; }效果：
这里只有id为div2的标签的内容受css样式的影响。
![]()
在编程中，id具有唯一性，就相当于人的身份证号码。
身份证号码具有2个特点：
1.每个人 有且仅有 一个身份证号码。
2.人和人之间 身份证号码 是不一样的。
id的唯一性就是上面这两个概念。
css中的id也继承了一部分这种编程中id的思想：一个元素只能有一个id。
-
代码
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <link rel="stylesheet" href="id.css"> </head> <body> <div> div1 <!--这里给div标签填入两个id值，多个属性值之间用空格隔开--> <div id="div2 div22">div2</div> <p >p1</p> </div> </body> </html>css
#div2 { font-size: 60px; } #div22 { color: red; }效果：
这里div标签并没有任何效果，不论是新加的颜色样式，连之前的字体大小样式都消失了。
因此，证明css中一个元素只能有一个id，如果给一个元素赋予多个id，那么对应id的样式将全部无法对此元素生效。
![]()
css中的id未继承另一个编程中id的思想：元素与元素之间的id不能相同。
-
代码
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <link rel="stylesheet" href="id.css"> </head> <body> <!--这里给两个p标签填入同一个id--> <div> div1 <div>div2</div> <p id="txt">p1</p> <p id="txt">p2</p> </div> </body> </html>css
#txt { font-size: 60px; }效果：
这里两个div标签中的内容都受到了css样式的影响。
因此，证明css中元素与元素之间的id可以相同，如果给多个元素赋予同一个id，那么对应id的样式将同时对多个元素生效。
![]()
css的id的这种不完全的唯一性，会容易造成我们编程思想上的冲突，所以我们在日常写css的时候，一般情况下会人为的控制id的唯一性，在写代码的时候不将两个元素设置为同一个id，以此人为的补全css自身这种不完全的唯一性。
id选择器的完整格式为：元素+ # +id {声明}
-
我们通常写id选择器的格式是：#+id
这里的#+id是一种简写，它的完整写法应该是： * + # +id {声明}
这个 * 是通配符，表示 ”所有标签“ 的意思，我们之前有讲过通配符选择器：* {声明}，表示所有元素都使用这个声明中的样式。
在id选择器中， * 的作用也是用于表示所有标签。
这里 * + # +id {声明} 整条语句表示：在所有标签中，只要标签的id为对应指定值，那么对这些元素都使用这个声明中的样式。
例如：*#txt {font-size:60px}
它表示在所有标签中，只要标签的id为 txt 的，都将它的字号设置为60px（有多少个id=”txt“，就设置多少个的字号为60px）。
程序执行后，它会先去找到所有的标签，然后再去找标签里面id值符合要求的，最后对这个标签使用样式。
实际演示一下：
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<link rel="stylesheet" href="id.css">
</head>
<body>
<div>
div1
<div>div2</div>
<p id="txt">p1</p>
</div>
</body>
</html>
css
-> id选择器简写
#txt {
font-size: 60px;
}
-> id选择器完整写
*#txt {
font-size: 60px;
}
简写效果：
完整写效果：
-
我们有时候也直接使用id选择器的完整格式，即 元素+ # +id {声明} 格式
这里 元素+ # +id {声明} 整条语句表示：在所有对应标签中，只要标签的id为对应指定值，那么对这些元素都使用这个声明中的样式。
例如：p#TXT2 {color:red}
它表示在所有p标签中，只要标签的id为 TXT2 的，都将它的颜色设置为red（有多少个id=”TXT2“，就设置多少个的颜色为red）。
程序执行后，它会先去找到所有对应的标签，然后再去找标签里面id值符合要求的，最后对这个标签使用样式。
（标签和id值，两项都要符合才能使用样式，缺一不可）
实际演示一下：
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<link rel="stylesheet" href="id.css">
</head>
<body>
<div>
div1
<div>div2</div>
<p id="txt">p1</p>
<p id="TXT2">p2</p>
</div>
</body>
</html>
css
p#TXT2 {
color: red;
}
div#TXT2 {
color: red;
}
效果：
这里只有 标签和id值都符合的内容”p2“使用了样式，id值不符合的内容”p1“ 以及 标签不符合的内容”div1“、”“div2” 都无法使用样式。
基本选择器——类型（class）选择器
-
代码
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class选择器</title> <link rel="stylesheet" href="class.css"> </head> <body> <div> div1 <div class="DIV01">div2</div> <p>p1</p> </div> </body> </html>css
/*class选择器只对与选择器有对应class属性值的标签生效*/ /*class选择器由 .+class 组成*/ .DIV01 { font-size: 100px; }效果：
这里只有class为DIV01的标签的内容受css样式的影响。
![]()
css中class的特点和id略有不同
1.一个元素可以有多个class。（这点与id不同）
-
代码
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class选择器</title> <link rel="stylesheet" href="class.css"> </head> <body> <div> div1 <!--这里给div标签填入两个class值，多个属性值之间用空格隔开--> <div class="DIV01 DIV02">div2</div> <p >p1</p> </div> </body> </html>css
.DIV01 { font-size: 100px; } .DIV02 { color: red; }效果：
这里div标签同时有两种效果，不论是新加的颜色样式，还是之前的字体大小样式都生效了。
因此，证明css中一个元素可以有多个class，如果给一个元素赋予多个class，那么对应class的样式将全部对此元素生效。
![]()
2.元素与元素之间的class可以相同。（这点与id相同）
-
代码
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class选择器</title> <link rel="stylesheet" href="class.css"> </head> <body> <!--这里给两个p标签填入同一个class--> <div> div1 <div>div2</div> <p class="txt01">p1</p> <p class="txt01">p2</p> </div> </body> </html>css
.txt01 { font-size: 100px; }效果：
这里两个p标签中的内容都受到了css样式的影响。
因此，证明css中元素与元素之间的class可以相同，如果给多个元素赋予同一个class，那么对应class的样式将同时对多个元素生效。
![]()
class选择器的完整格式为：元素+ . +class {声明}
-
我们通常写class选择器的格式是：.+class
这里的.+class是一种简写，它的完整写法应该是： * + . +class {声明}
这个 * 是通配符，表示 ”所有标签“ 的意思，我们之前有讲过通配符选择器：* {声明}，表示所有元素都使用这个声明中的样式。
在class选择器中， * 的作用也是用于表示所有标签。
这里 * + . +class {声明} 整条语句表示：在所有标签中，只要标签的class为对应指定值，那么对这些元素都使用这个声明中的样式。
例如：*.txt01 {font-size:100px}
它表示在所有标签中，只要标签的class为 txt 01的，都将它的字号设置为100px（有多少个class=”txt01“，就设置多少个的字号为100px）。
程序执行后，它会先去找到所有的标签，然后再去找标签里面class值符合要求的，最后对这个标签使用样式。
实际演示一下：
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<link rel="stylesheet" href="class.css">
</head>
<body>
<div>
div1
<div>div2</div>
<p class="txt01">p1</p>
</div>
</body>
</html>
css
-> class选择器简写
.txt01 {
font-size: 100px;
}
-> id选择器完整写
*.txt01 {
font-size: 100px;
}
简写效果：
完整写效果：
-
我们有时候也直接使用class选择器的完整格式，即 元素+ . +class {声明} 格式
这里 元素+ . +class {声明} 整条语句表示：在所有对应标签中，只要标签的class为对应指定值，那么对这些元素都使用这个声明中的样式。
例如：p.TXT02 {color:red}
它表示在所有p标签中，只要标签的class为 TXT02 的，都将它的颜色设置为red（有多少个class=”TXT02“，就设置多少个的颜色为red）。
程序执行后，它会先去找到所有对应的标签，然后再去找标签里面class值符合要求的，最后对这个标签使用样式。
（标签和class值，两项都要符合才能使用样式，缺一不可）
实际演示一下：
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<link rel="stylesheet" href="class.css">
</head>
<body>
<div>
div1
<div>div2</div>
<p class="txt01">p1</p>
<p class="TXT02">p2</p>
</div>
</body>
</html>
css
p.TXT02 {
color: red;
}
div.TXT02 {
color: red;
}
效果：
这里只有 标签和class值都符合的内容”p2“使用了样式，class值不符合的内容”p1“ 以及 标签不符合的内容”div1“、”“div2” 都无法使用样式。
浙公网安备 33010602011771号