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>
超链接的状态顺序