css选择器

选择器

  • 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。
  • 在CSS中，执行这一任务的样式规则的部分被称为选择器（选择符）。

1.css基础选择器 

1.1标签选择器(元素选择器)

  • 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
  • 其基本语法格式如下：
1 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
2 
3 或者
4 
5 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
 1     <style>
 2          th {
 3              color: skyblue;
 4          }
 5 
 6         td {
 7            font-size: 14px;
 8          }
 9  
10         tr {
11              height: 30px;
12          }
13  
14         caption {
15             color: deeppink;
16              font-size: 30px;
17          }
18      </style>

 

  • 标签选择器最大的优点是能快速为页面中同类型的标签设置统一样式，同时这也是他的缺点，不能设计差异化样式。
  • 标签选择器可以把某一类标签全部选择出来     如:div span

1.2类选择器

  • 类选择器使用“.”（英文点号）进行标识，后面紧跟类名，
  • 其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名”  即可。

 

  • 类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
  • 类选择器命名规则:
  1. 长名称或词组可以使用中横线来为选择器命名。 如: .custom-blue { color : blue }
  2. 不建议使用“_”下划线来命名CSS选择器。(为了良好的区分JavaScript变量命名(JS变量命名使用"_"))
  3. 不要纯数字、中文等命名， 尽量使用英文字母来表示。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8" />
 6   <title>类选择器</title>
 7   <style>
 8     span {
 9       font-size: 150px;
10     }
11 
12     .custom-blue {
13       color: blue;
14     }
15 
16     .custom-red {
17       color: red;
18     }
19 
20     .custom-yellow {
21       color: yellow;
22     }
23 
24     .custom-green {
25       color: green;
26     }
27   </style>
28 </head>
29 
30 <body>
31   <span class="custom-blue">G</span>
32   <span class="custom-red">o</span>
33   <span class="custom-yellow">o</span>
34   <span class="custom-blue">g</span>
35   <span class="custom-green">l</span>
36   <span class="custom-red">e</span>
37 </body>
38 
39 </html>

 

运行结果

1.3 多类名选择器

  • 我们可以给标签指定多个类名，从而达到更多的选择目的。

  • 注意:
  1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,与CSS样式书写的上下顺序有关。
  2. 各个类名中间用空格隔开。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>多类名选择器</title>
 7     <style>
 8         .custom-red {
 9             color: red;
10         }
11 
12         .font20 {
13             font-size: 20px;
14         }
15 
16         .font30 {
17             color: blue;
18             font-size: 30px;
19         }
20     </style>
21 </head>
22 
23 <body>
24     <div class="custom-red font20">文字颜色红色,字号20px</div>
25     <div>多类名选择器div</div>
26     <p>多类名选择器p</p>
27     <p class="custom-red font30">样式显示效果跟HTML元素中的类名先后顺序没有关系,与CSS样式书写的上下顺序有关。</p>
28     <p class="font30 custom-red">样式显示效果跟HTML元素中的类名先后顺序没有关系,与CSS样式书写的上下顺序有关。</p>
29     <div>多类名选择器div</div>
30     <div>多类名选择器div</div>
31     <div class="custom-red">文字颜色红色</div>
32 </body>
33 
34 </html>

 

运行结果

类名选择器: <div class="nav"> 这种形式相当于给div标签起了个名字nav.所以说nav就是div,div就是nav.

1.4 id选择器

  •  id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 

  • 该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
  • 用法基本和类选择器相同。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>id选择器</title>
 7     <style>
 8         #id-pink {
 9             color: pink;
10         }
11     </style>
12 </head>
13 
14 <body>
15     <div>id选择器</div>
16     <div>id选择器,好比人的身份证号码,当前页面是唯一的,不得重复.只能使用一次.</div>
17     <div id="id-pink">id选择器</div>
18 </body>
19 
20 </html>

 

运行结果

1.5 id选择器与类选择器区别

  1. W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
  2. 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
  3. id选择器 好比人的身份证号码， 是唯一的， 不得重复。 只能使用一次。
  4. ***id选择器和类选择器最大的不同在于 使用次数上。***

1.6 通配符选择器 (实际开发不使用)

  • 通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
  • 其基本语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 

  •  例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
1     <style>
2         * {
3             /* 定义外边距*/
4             margin: 0;
5             /* 定义内边距*/
6             padding: 0;
7         }
8     </style>

 

  • 注意:
  • 这个通配符选择器，就像我们的电影明星中的梦中情人， 想想它就好了，但是它不会和你过日子。(实际开发中不会使用).
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>通配符选择器</title>
 7 </head>
 8 
 9 <body>
10     <table width="500" cellspacing="0" cellpadding="0" border="1">
11         <caption>去除table的边距</caption>
12 
13         <tr>
14             <td>姓名</td>
15             <td>性别</td>
16             <td>年龄</td>
17             <td>号码</td>
18         </tr>
19 
20     </table>
21 </body>
22 
23 </html>

 

运行结果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>通配符选择器</title>
 7     <style>
 8         * {
 9             /* 定义外边距*/
10             margin: 0;
11             /* 定义内边距*/
12             padding: 0;
13         }
14     </style>
15 </head>
16 
17 <body>
18     <table width="500" cellspacing="0" cellpadding="0" border="1">
19         <caption>去除table的边距</caption>
20 
21         <tr>
22             <td>姓名</td>
23             <td>性别</td>
24             <td>年龄</td>
25             <td>号码</td>
26         </tr>
27 
28     </table>
29 </body>
30 
31 </html>

 

运行结果 

 

posted on 2019-01-21 09:28  jaydenjune  阅读(40)  评论(0)    收藏  举报

导航