属性选择器，伪类选择器，伪元素选择器

最新推荐文章于 2020-05-15 16:16:19 发布

weixin_30553777

最新推荐文章于 2020-05-15 16:16:19 发布

阅读量114

点赞数

原文链接：http://www.cnblogs.com/Nopeeee/p/10028330.html

版权

属性选择器
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性选择器</title>
 6     <style>
 7         /*属性匹配*/
 8         label[for] {
 9             color:deeppink;
10             text-decoration:underline;
11         }
12         /*属性名匹配*/
13         label[for='pwd'] {
14             color:deeppink;
15             text-decoration:none;
16         }
17         /*以什么结尾匹配*/
18         label[for$='3'] {
19             color:khaki;
20             font-size:50px;
21         }
22         /*以什么开头匹配*/
23         label[for^='7'] {
24             color:gold;
25             font-size:50px;
26         }
27         /*属性名中有什么匹配*/
28         label[for*='ser'] {
29             color:firebrick;
30         }
31     </style>
32 </head>
33 <body>
34     <!--属性选择器在表单控件中使用比较频繁-->
35     <div>
36 
37         <div class="box">
38 
39             <form action="">
40                 <label for="user">用户名</label>
41                 <input type="text" id="user">
42                 <label for="pwd">密码：</label>
43                 <label for="vip">vip</label>
44                 <label for="vip1">vip1</label>
45                 <label for="7vip2">vip2</label>
46                 <label for="vip3">vip3</label>
47                 <label for="user1">用户名1</label>
48                 <label for="user2">用户名2</label>
49                 <label for="user3">用户名3</label>
50             </form>
51         </div>
52     </div>
53 </body>
54 </html>

伪类选择器
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪类选择器</title>
 6     <style>
 7 
 8         /*没有被访问的标签样式*/
 9         .box ul li.item1 a:link {
10             color:gray;
11         }
12         /*访问过的标签样式*/
13         .box ul li.item2 a:visited {
14             color:palegoldenrod;
15         }
16         /*鼠标悬停时的标签样式*/
17         .box ul li.item3 a:hover {
18             color:red;
19         }
20         /*鼠标点住时的样式*/
21         .box ul li.item4 a:active {
22             color:teal;
23         }
24         /*选中第一个元素*/
25         div ul li:first-child {
26             font-size:30px;
27         }
28         /*选中最后一个元素*/
29         div ul li:last-child {
30             font-size:10px;
31         }
32         /*选中括号里的第几个元素 数值是n的话表示选中所有，n是从0开始的，0的时候表示没有选中 2n选中偶数 2n-1选奇数*/
33         div ul li:nth-child(3) {
34             font-size:40px;
35         }
36         /*隔行换色 n前面的数值表示隔几减一行换色*/
37         div ul li:nth-child(4n+1) {
38             font-size:40px;
39         }
40     </style>
41 </head>
42 <body>
43     <div class="box">
44         <ul>
45             <li class="item1">
46                 1
47                 <a href="#">张三</a>
48             </li>
49             <li class="item2">
50                 2
51                 <a href="#">李四</a>
52             </li>
53             <li class="item3">
54                 3
55                 <a href="#">王八</a>
56             </li>
57             <li class="item4">
58                 4
59                 <a href="#">王八单</a>
60             </li>
61         </ul>
62     </div>
63 </body>
64 </html>

 伪元素选择器
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪元素选择器</title>
 6     <style>
 7         /*设置首字符的样式*/
 8         p:first-letter {
 9             color: coral;
10             font-size:50px;
11         }
12         /*在前面加内容(使用不是很频繁) 对应的还有after(使用非常频繁) 使用此伪元素选择器一定要结合content属性*/
13         p:before {
14             content:'阿尔托莉雅';
15         }
16     </style>
17 </head>
18 <body>
19 
20     <p>
21         我是一个段落
22     </p>
23 </body>
24 </html>

转载于:https://www.cnblogs.com/Nopeeee/p/10028330.html

weixin_30553777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
属性选择器，伪类选择器，伪元素选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>属性选择器</title> 6 <style> 7 /*属性匹配*/ 8...
复制链接

扫一扫