黑马学习选择器练习

黑马学习选择器练习
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性选择器一</title>
 6     <style>
 7         /*字符串包含*/
 8         [class*="logo"]{
 9             color: purple;
10         }
11         /*值列表包含*/
12         [class~="logo"]{
13             color: pink;
14         }
15     </style>
16 </head>
17 <body>
18     <p class="csdn_logo">csdn_logo</p>
19     <p class="csdn logo big">csdn logo big</p>
20 </body>
21 </html>
属性选择器一 黑马学习选择器练习
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性选择器2</title>
 6     <style>
 7         p[id="csdn"]{
 8             color: orange;
 9         }
10         /*p[id*="csdn"]{*/
11             /*color: grey;*/
12         /*}*/
13         /*p[id$="csdn"]{*/
14             /*color:goldenrod;*/
15         /*}*/
16         /*p[id^="csdn"]{*/
17             /*color: blueviolet;*/
18         /*}*/
19         p[id]{
20             color: green;
21         }
22         p{
23             color: brown;
24         }
25     </style>
26 </head>
27 <body>
28     <p id="csdn">csdn</p>
29     <p id="xxcsdn">xxcsdn</p>
30     <p id="csdnxx">csdnxx</p>
31     <p id="xxcsdnxx">xxcsdnxx</p>
32     <p>文本</p>
33 </body>
34 </html>
属性选择器二 黑马学习选择器练习
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选择器优先级测试</title>
 6 
 7     <link rel="stylesheet" href="css/purple.css">
 8     <link rel="stylesheet" href="css/pink.css">
 9     <style>
10         /*
11             计算选择器优先级(a-b-c)
12             a: id选择器个数
13             b: 类选择器,属性选择器,伪类选择器个数
14             c: 元素选择器,伪元素个数
15             #text 100
16             [id="text"][class="green"] 20
17             [class="green"] 10
18             .green 10
19             p 1
20             #text > [id="text"][class="green"] > [class="green"] = .green > p
21             同级别选择器:后面的覆盖前面的,css文件的位置按照link标签的位置算。
22         */
23         #text{
24             color: blue;
25         }
26         [id="text"][class="green"]{
27             color: goldenrod;
28         }
29         [class="green"]{
30             color: goldenrod;
31         }
32         .green{
33             color: green;
34         }
35         /*!*同级选择器后面覆盖前面的*!*/
36         p{
37             color: pink;
38         }
39         p{
40              color: purple;
41         }
42     </style>
43 </head>
44 <body>
45     <p>
46         文本
47     </p>
48     <p class="green">
49         文本
50     </p>
51     <p id="text" class="green">
52         文本
53     </p>
54 </body>
55 </html>
选择器优先级 黑马学习选择器练习
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>隔行换色</title>
 6     <style>
 7         table{
 8             width: 400px;
 9             /*设置是否合并表格边框和单元格边框*/
10             /*border-collapse: collapse;*/
11             /*设置单元格间距*/
12             border-spacing: 20px;
13             border: 5px solid black;
14         }
15         td{
16             border: 5px solid black;
17         }
18 
19         /*
20             nth-of-type(an + b),子元素的索引从1开始,n>=0
21         */
22         /*table tr:nth-of-type(2n + 1) {*/
23             /*background-color: #ffc0cb;*/
24         /*}*/
25         table tr:nth-of-type(odd) {
26             background-color: #ffc0cb;
27         }
28 
29         /*table tr:nth-of-type(2n) {*/
30             /*background-color: #ffdead;*/
31         /*}*/
32         table tr:nth-of-type(even) {
33             background-color: #ffdead;
34         }
35     </style>
36 </head>
37 <body>
38 <table>
39     <tr>
40         <td>1</td>
41         <td>阿里</td>
42         <td>淘宝、天猫</td>
43     </tr>
44     <tr>
45         <td>2</td>
46         <td>腾讯</td>
47         <td>QQ、微信</td>
48     </tr>
49     <tr>
50         <td>3</td>
51         <td>百度</td>
52         <td>百度地图、爱奇艺</td>
53     </tr>
54     <tr>
55         <td>4</td>
56         <td>网易</td>
57         <td>网易云音乐</td>
58     </tr>
59 </table>
60 </body>
61 </html>
伪结构选择器 表格隔行换色 黑马学习选择器练习
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         a:link{
 8             color: #000;
 9         }
10         a:visited{
11             color: brown;
12         }
13         /*hover和focus的位置可调,其他的顺序一般这样*/
14         a:focus{
15             color: pink;
16         }
17         a:hover{
18             color: goldenrod;
19         }
20         a:active{
21             color: blueviolet;
22         }
23     </style>
24 </head>
25 <body>
26 <a href="#" tabindex="1">百度</a>
27 </body>
28 </html>
超链接的状态顺序

 

上一篇:java 枚举


下一篇:Markdown 列表