4.CSS选择器

1.CSS基础选择器

1）通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10             font-size: 28px;
11         }
12         div {
13             color: red;
14             background-color: pink;
15         }
16     </style>
17 </head>
18 <body>
19     <div>码海无际</div>
20     <span>码海无际</span>
21 </body>
22 </html>

 

2）标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             color: pink;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>码海无际</div>
14 </body>
15 </html>

3）类选择器

  1. 不要纯数字、中文等命名，尽量使用英文字母来表示。

  2. 长名称或词组可以使用中横线来为选择器命名。

  3. 不建议使用“_”下划线来命名CSS选择器。

  4. 类选择器使用“.”（英文点号）进行标识，后面紧跟类名。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .color-blue{
 8             color: blue;
 9         }
10     </style>
11 </head>
12 <body>
13     <div class="color-blue">码海无际</div>
14     <span class="color-blue">志向高远</span>
15 </body>
16 </html>

4）多类名选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .color-blue{
 8             color: blue;
 9         }
10         .font-size28{
11             font-size: 28px;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="color-blue font-size28">码海无际</div>
17     <span class="color-blue">志向高远</span>
18 </body>
19 </html>

5）id选择器

  1. 用法基本和类选择器相同。

  2. id选择器使用“#”进行标识，后面紧跟id名。

  3. 该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

id选择器和类选择器区别：

  1. W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

  2. 类选择器(class)，好比人的名字，是可以多次重复使用的，比如：张伟、老王。

  3. id选择器，好比人的身份证号码，全中国是唯一的，不得重复，只能使用一次。

  4. id选择器和类选择器最大的不同在于使用次数上。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #color-blue {
 8             color: blue;
 9         }
10     </style>
11 </head>
12 <body>
13     <div id="color-blue">码海无际</div>
14 </body>
15 </html>

6）选择器的优先级

通配符选择器<标签选择器<类选择器<id选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             color: pink;
 9         }
10         div {
11             color: red;
12         }
13         div {
14             color: blue;
15         }
16         .color-green {
17             color: green;
18         }
19         #color-blueviolet {
20             color: blueviolet;
21         }
22     </style>
23 </head>
24 <body>
25     <div class="color-green" id="color-blueviolet">码海无际</div>
26 </body>
27 </html>

2.CSS复合选择器

1）交集选择器

  1. 交集选择器由两个或两个以上选择器构成。

  2. 选择器之间没有任何的连接符号，选择器之间没有固定顺序。

  3. 选择器可以是：标签选择器、类选择器、id选择器。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div.color-blue {
 8             color: blue;
 9         }
10         div#color-red.color-red{
11             color: red;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="color-blue">码海无际</div>
17     <span class="color-blue">码海无际</span>
18     <hr>
19     <div class="color-red" id="color-red">码海无际</div>
20 </body>
21 </html>

2）并集选择器

  1. 交集选择器由两个或两个以上选择器构成。

  2. 选择器之间通过英文逗号连接，选择器之间没有固定顺序。

  3. 选择器可以是：标签选择器、类选择器、id选择器。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*span {*/
 8         /*    color: blue;*/
 9         /*    font-size: 28px;*/
10         /*}*/
11 
12         /*div {*/
13         /*    color: blue;*/
14         /*    font-size: 28px;*/
15         /*}*/
16         /*俩种写法一样*/
17         span, div {
18             color: blue;
19             font-size: 28px;
20         }
21     </style>
22 </head>
23 <body>
24     <div>码海无际</div>
25     <span>码海无际</span>
26 </body>
27 </html>

3）子元素选择器

  1. 子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

  2. 这里的子，指的是亲儿子，不包含孙子、重孙子之类。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div > .color-pink > span{
 8             color: pink;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>
14         <div class="color-pink">
15             <span>码海无际</span><!--有效果-->
16         </div>
17         <div>
18             <span>码海无际</span><!--无效果-->
19         </div>
20         <span>
21             <div class="color-pink">
22                <span>码海无际</span><!--无效果-->
23             </div>
24         </span>
25     </div>
26 </body>
27 </html>

4）后代选择器

  1. 后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

  2. 包含孙子、重孙子之类

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div h1{
 8             color: blue;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>
14         <h1>码海无际</h1>
15         <span>
16             <h1>码海无际</h1>
17         </span>
18     </div>
19 </body>
20 </html>

5）伪类选择器

  1. 伪类选择器用于向某些选择器添加特殊的效果。

  2. 伪类对象要配合content属性一起使用。

  3. 一个冒号是css2的写法，两个冒号是css3的写法，表达的意思一样。

  4. 冒号的前面和后面都不允许有空格。

选择器示例示例说明
:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁用的表单元素
:empty p:empty 选择所有没有子元素的p元素
:enabled input:enabled 选择所有启用的表单元素
:first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
:in-range input:in-range 选择元素指定范围内的值
:invalid input:invalid 选择所有无效的元素
:last-child p:last-child 选择所有p元素的最后一个子元素
:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) :not(p) 选择所有p以外的元素
:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
:only-child p:only-child 选择所有仅有一个子元素的p元素
:optional input:optional 选择没有"required"的元素属性
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:required input:required 选择有"required"属性指定的元素属性
:root root 选择文档的根元素
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid input:valid 选择所有有效值的属性
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个p元素的第一个字母
:first-line p:first-line 选择每个p元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 p 元素
:before p:before 在每个p元素之前插入内容
:after p:after 在每个p元素之后插入内容
:lang(language) p:lang(it) 为p元素的lang属性选择一个开始值 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         a:visited{
 8             color: red;
 9         }
10         p:before{
11             content:"P前面";
12             color: red;
13         }
14         p:after{
15             content:"P后面";
16             color: red;
17         }
18     </style>
19 </head>
20 <body>
21     <a href="https://www.taobao.com">淘宝</a>
22     <a href="https://www.baidu.com">百度</a>
23     <a href="https://www.taobaoaa.com">淘宝aa</a>
24     <a href="https://www.taobaoaaa.com">淘宝aaa</a>
25     <hr>
26     <p>P元素</p>
27 </body>
28 </html>

 

posted @ 2020-03-03 21:53  码海无际  阅读(368)  评论(0)    收藏  举报