css--选择器、表格样式

css选择器

常用的选择器有如下几种：

1、标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->
2、id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：

#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
3、类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
4、层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>
5、组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
6、伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>选择器</title>
 9 
10     <style type="text/css">
11         #cherry{color:red;}
12         .cherry1{color:yellow;}
13         .cherry2{font-family:'楷体';font-size:30px}
14         .cherry3{text-align:center;}
15         /*em{color:red;}*/
16         .p em{font-family:'楷体';font-size:30px;}
17         .list li{color:red;}
18 
19         .box1,.box2,.box3{font-family:'楷体'}
20         .box1{color:red}
21         .box2{color:gold}
22         .box3{color:yellow}
23 
24         .box1:hover{color:black}
25         .box2:before{content:'哈哈哈哈 '}
26         .box3:after{content:'嘻嘻嘻嘻 ';color:black}
27 
28     </style>
29 </head>
30 <body>
31 
32 <div id="cherry">这是第一个div</div>
33 <div class="cherry1 cherry2">这是第二个div</div>
34 <div class="cherry1 cherry3">这是第三个div</div>
35 
36 <p class="p">列表<em>的形式展现出来</em>，点击你想查看的一个或者多个会话，再点击右边的“Statistics”菜单，你就可以很轻松的查看到请求数、发送字节数等信息。如果你选择第一个请求和最</p>
37 
38 <ol class="list">
39     <li><em>新闻联播</em></li>
40     <li>新闻联播</li>
41     <li>新闻联播</li>
42     <li>新闻联播</li>
43     <li>新闻联播</li>
44 </ol>
45 
46 <div class="box1">这是第一个元素</div>
47 <div class="box2">这是第二个元素</div>
48 <div class="box3">这是第三个元素</div>
49 
50 </body>
51 </html>




表格样式：
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>表格样式</title>
 9 
10     <style type="text/css">
11         .box{
12             width:600px;
13             height:200px;
14             border:1px solid #333;
15             border-collapse:collapse;
16         }
17 
18         .box th,.box td{
19             border:1px solid #333;
20             text-align:center;
21         }
22 
23         .box th{
24             background-color:#3366cc;
25             color:#ffffff;
26         }
27     </style>
28 </head>
29 <body>
30 <table class="box">
31     <tr>
32         <th>序号</th>
33         <th>名称</th>
34         <th>数量</th>
35         <th>价格</th>
36         <th>备注</th>
37     </tr>
38     <tr>
39         <td>1</td>
40         <td>苹果</td>
41         <td>1000.00</td>
42         <td>￥5.00</td>
43         <td>销售中</td>
44     </tr>
45     <tr>
46         <td>1</td>
47         <td>苹果</td>
48         <td>1000.00</td>
49         <td>￥5.00</td>
50         <td>销售中</td>
51     </tr>
52     <tr>
53         <td>1</td>
54         <td>苹果</td>
55         <td>1000.00</td>
56         <td>￥5.00</td>
57         <td>销售中</td>
58     </tr>
59 </table>
60 </body>
61 </html>

 

posted on 2019-11-01 22:26  cherry_ning  阅读(701)  评论(0)    收藏  举报

导航