CSS属性选择器

属性选择器

 

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="./css/属性选择器.css">
 7 </head>
 8 <body>
 9     <h1 class="hoopla">Hello</h1>
10     <h1 class="hoopla fancy">Hi
11     <h1 class="severe">serenity</h1>
12     <h1 class="fancy">Fooling</h1>
13     <span class="1cloud sun">colud</span>
14     <span class="1rain sun">rain</span>
15     <span class="sun">sun</span>
16 </html>

 

 1 h1[class] {/*根据元素属性来选择元素*/
 2     color: silver;
 3 }
 4 
 5 h1[class="hoopla"]{/*根据具体属性值选择元素，
 6                     这种格式要求必须与属性值完全匹配*/
 7     text-decoration: underline;
 8 }
 9 
10 h1[class~="fancy"] {/*根据部分属性值选择元素，～ 声明为部分选择*/
11     display: block;
12     margin-right: 1000px;
13     background: #ff0000;
14 }

15 /*子串匹配选择器*/
16 span[class*="n"]{/*选择class属性值中包含子串"n"的所有元素*/
17     background: #f60;
18 }
19 span[class^="1"]{/*选择class属性值以"1"开头的所有元素*/
20     background: #ccc;
21 }
22 span[class$="sun"]{/*选择class属性值以"sun"结尾的所有元素*/
23     text-decoration: underline;
24 }

简单属性选择：选择元素某个属性，不论属性值是什么。

　　这里选择h1元素 → Class属性 的元素,设置前景色为银色

        　 h1[class] {/*根据元素属性来选择元素*/

　　　　　　color : silver;

　　　 　}

 

具体属性值选择：除了选择元素某个属性，还可以进一步缩小选择范围，只选择特定属性值的元素

　　这里选择h1元素 → Class属性 → 具体值“hoopla” 的元素，设置文本样式为有下划线

            h1[class=”hoopla”] {/*根据具体属性值选择元素，这种格式要求必须与属性值完全匹配*/

  　　　　   text-decoration : underline;

　　　　 }

 

部分属性值选择：可以根据属性值，其中任意一个词进行选择

      这里选择h1元素 → Class属性 → 部分值“fancy” 的元素，有两个h1元素 含有“fancy”，这两个元素样式都会被设置

            h1[class~="fancy"] {/*根据部分属性值选择元素，～声明为部分选择*/

                 margin-right: 1000px;

　　　　　　background: #ff0000;

　　　　}

posted @ 2016-07-14 22:00  坚韧小峰  阅读(182)  评论(0)    收藏  举报