选择器

通过选择器，我们可以控制所有是这一标签影响下的元素。选择器之间还可以进行嵌套，通过各种嵌套来设置给指定的元素设置各种信息。

在这之前我们控制整个页面有三种方式，分别为内部引入方式、外部引入方式和行内引入方式。行内引入方试的优先级最高，剩余两种哪个最后写哪个优先级高。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <!-- 内部引入方式 -->
 7         <style type="text/css">
 8             div{
 9                 font-size: 30px;
10                 font-family: "blackadder itc";
11             }
12             p{
13                 font-size: 30px;
14                 font-family: "Ink Free";
15             }
16         </style>
17         <!-- 外部引入方式  这两种哪个更靠后，就哪个优先-->
18         <link rel="stylesheet" type="text/css" href="CSS开发.css"/>
19     </head>
20     <body>
21         <div>I am the first one!</div>
22         <div>I am the second one!</div>
23         <div>I am the third one!</div>
24         <!-- 这是行内引入  优先级最高-->
25         <p style="color:green;">I don't like you guys.</p>
26     </body>
27 </html>

 

 

选择器分类：选择器分为标签选择器、类选择器和id选择器

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             /* 选择器{
 8                 属性名1:属性值1;
 9                 属性名2:属性值2;
10                 属性名3:属性值3;
11             }     */
12             /* 1.标签选择器 */
13             只要是这个标签的,属性就全在这里面设置了
14             div{
15                 font-size: 12px;
16             }
17             /* 2.类选择器 */
18             .one{
19                 color:blue;
20             }
21             .two{
22                 color:green;
23             }
24             /* id选择器 */
25             #header{
26                 font-family: "arial rounded mt bold";
27             }
28             #navigation{
29                 font-family: "arial narrow";
30             }
31         </style>
32     </head>
33     <body>
34         <div class="one" id="header">你对力量一无所知！</div>
35         <div class="two" id="navigation">享受这冰冷的胜利吧！</div>
36         <div class="one">不，这胜利没有任何意义！</div>
37     </body>
38 </html>

 

 

 

最后一个内容

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             /* 选择器{
 8                 属性名1:属性值1;
 9                 属性名2:属性值2;
10                 属性名3:属性值3;
11             }     */
12             /* 只要是这个标签的,属性就全在这里面设置了 */
13             div p{
14                 font-size: 12px;
15             }  /* 这表示对div下面的p标签做控制 */
16             div p span{
17                 color:red;
18                 font-size:50px;
19             }  /* 这表示只能对div下面的p标签下面的span标签做控制 */
20             .one{
21                 color:blue;
22             }
23             .two{
24                 color:green;
25                 font-size: 20px;
26             }
27             .good{
28                 font-size: 30px;
29             }
30             
31         </style>
32     </head>
33     <body>
34         <div class="one good">你对力量一无所知！</div>
35         <div class="two">享受这冰冷的胜利吧！</div>
36         <div class="one"><p>不，这<span>胜利</span>没有任何意义！</p></div>
37         <p>洗洗睡吧孩子！</p>
38     </body>
39 </html>

最下面那个“你对力量一无所知！”的类还可以设置多个，一起控制。

 

真的是最后一个内容了 

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             /* 选择器{
 8                 属性名1:属性值1;
 9                 属性名2:属性值2;
10                 属性名3:属性值3;
11             }     */
12             /* 只要是这个标签的,属性就全在这里面设置了 */
13             div p{
14                 font-size: 12px;
15             }  /* 这表示对div下面的p标签做控制 */
16             div p span{
17                 color:red;
18                 font-size:50px;
19             }  /* 这表示只能对div下面的p标签下面的span标签做控制 */
20             .one{
21                 color:blue;
22             }
23             .two{
24                 color:green;
25                 font-size: 20px;
26             }
27             .good{
28                 font-size: 30px;
29             }
30             div.two{  /* 这表示我只想让div下面的类是two的受到影响,这样p.two不受到影响 */
31                 color:brown;
32             }
33         </style>
34     </head>
35     <body>
36         <div class="one good">你对力量一无所知！</div>
37         <div class="two">享受这冰冷的胜利吧！</div>
38         <div class="one"><p>不，这<span>胜利</span>没有任何意义！</p></div>
39         <p class="two">洗洗睡吧孩子！</p>
40     </body>
41 </html>

 

 

posted @ 2021-02-05 23:37  EvanTheBoy  阅读(133)  评论(0)    收藏  举报