css3-选择器

CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2个子元素div匹配 -->

2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
3、E:first-child：匹配元素类型为E且是父元素的第一个子元素
4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
8、E:first-of-type：匹配父元素的第一个类型为E的子元素
9、E:last-of-type：匹配父元素的最后一个类型为E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 选择一个空的元素
12、E:enabled 可用的表单控件
13、E:disabled 失效的表单控件
14、E:checked 选中的checkbox
15、E:not(s) 不包含某元素 

<style type="text/css">            
    .list div:not(:nth-child(2)){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第 3、4、5 子元素div匹配 -->

16、E:target 对应锚点的样式

<style type="text/css">
    h2:target{
        color:red;
    }
</style>
......
<a href="#tit01">标题一</a>
......
<h2 id="tit01">标题一</h2>

<!-- 点击链接，h2标题变红 -->

17、E > F E元素下面第一层子集
18、E ~ F E元素后面的兄弟元素
19、E + F 紧挨着的兄弟元素

属性选择器：
1、E[data-attr] 含有data-attr属性的元素 

<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">这是一个div元素</div>

<!-- 点击链接，h2标题变红 -->

2、E[data-attr='ok'] 含有data-attr属性的元素且它的值为“ok”
3、E[data-attr^='ok'] 含有data-attr属性的元素且它的值的开头含有“ok”
4、E[data-attr$='ok'] 含有data-attr属性的元素且它的值的结尾含有“ok”
5、E[data-attr*='ok'] 含有data-attr属性的元素且它的值中含有“ok” 

 

  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>css3选择器</title>
  9 
 10     <style type="text/css">
 11         li{
 12             background-color:gold;
 13             margin-bottom:10px;
 14         }
 15 
 16         li:nth-child(1){               /* 匹配元素类型为li且是父元素的第n个子元素 */
 17             background-color:red;
 18         }
 19 
 20         li:nth-of-type(2){              /* 匹配父元素的第n个类型为li的子元素 */
 21             background-color:blue;
 22         }
 23 
 24         /*匹配偶数行
 25         li:nth-child(2n){
 26             background-color:yellow;
 27         } */
 28 
 29         /*匹配奇数行
 30         li:nth-child(2n+1){
 31             background-color:yellow;
 32         }*/
 33 
 34         li:nth-last-child(1){          /* 匹配元素类型为li且是父元素的倒数第n个子元素 */
 35             background-color:green;
 36         }
 37 
 38         li:nth-child(3){     /*  第三个子元素，而且这个子元素的类型是p，就匹配 */
 39             background-color:blue;
 40         }
 41 
 42         li:nth-of-type(3){    /*  父级下面第三个p元素，碰到不同类型的元素跳过 */
 43             background-color:blue;
 44         }
 45 
 46         /*  --------------------------------------------------- */
 47         /*匹配元素类型为p且是父元素的第一个子元素
 48         .box p:first-child{
 49             color:gold;
 50         }
 51         */
 52 
 53         /*匹配元素类型为p且是父元素的最后一个子元素
 54         .box p:last-child{
 55             color:red;
 56         }
 57         */
 58 
 59         .box p:only-child{      /*  匹配元素类型为p且是父元素中唯一的子元素 */
 60             color:red;
 61         }
 62 
 63         .box p:only-of-type{     /*  匹配父元素中唯一子元素是p的子元素 */
 64             color:pink;
 65         }
 66 
 67         div:empty{         /*  选择一个空的元素 */
 68             background-color:red;
 69             height:15px;
 70         }
 71 
 72         /*  --------------------------------------------------- */
 73         input:disabled{       /*  失效的表单控件*/
 74             background-color:gold;
 75         }
 76 
 77         input:enabled{         /*  可用的表单控件 */
 78             background-color:blue;
 79         }
 80 
 81         input:checked + label{    /*  选中的checkbox,选中后label颜色变为红色 */
 82             color:red;
 83         }
 84 
 85         .box1{
 86             width:100px;
 87             height:100px;
 88             background-color:gold;
 89             display:none;   /*  默认隐藏该div盒子 */
 90         }
 91 
 92         input:checked + div{
 93             display:block;   /*  选中的checkbox,显示之前隐藏的div盒子 */
 94         }
 95 
 96     </style>
 97 </head>
 98 <body>
 99 
100 <ul>
101     <li>1</li>
102     <li>2</li>
103     <p>这是一个标签</p>
104     <li>3</li>
105     <li>4</li>
106     <li>5</li>
107     <li>6</li>
108     <li>7</li>
109     <li>8</li>
110 </ul>
111 
112 <div class="box">
113     <p>这是第一个p标签</p>
114     <div>这是一个div元素</div>
115     <p>这是第二个p标签</p>
116 </div>
117 
118 <div></div>
119 <br><br>
120 
121 <input type="text" name="" disabled>
122 <input type="text" name="">
123 <br>
124 <input type="checkbox" name=""><label>选择的状态</label>
125 <br>
126 <input type="checkbox" name=""><div class="box1">这是一个元素</div>
127 
128 </body>
129 </html>

posted on 2019-11-24 11:55  cherry_ning  阅读(144)  评论(0)    收藏  举报

导航