css3选择器

2021-07-16 10:47:51

{回顾CSS2选择器:class（.class名）、id（#id名）、标签名（Element名）、后代选择器（ul li）、群组选择器（.div,.a）、组合选择器（div.a）。}

CSS3选择器:

同级元素通用选择器：E~F，匹配任何在E元素之后的同级F元素。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li{
    list-style: none;
}
.div1~li{/*选择class为.div1后的所有同级元素且背景颜色为红色*/
    background-color:red;
}
</style>
</head>
<body>
<ul>
    <li>我是列表</li>
    <div class="div1">asdas</div>
    <li>我是列表</li>
    <li>我是列表</li>
    <li>我是列表</li>
    <li>我是列表</li>
    <li>我是列表</li>
</ul>
</body>
</html>

属性选择器:
- E[att^=”val”]，匹配属性att的值以”val”开头的元素。
- E[att$=”val”]，属性att的值以”val”结尾的元素。
- E[att*=”val”]，属性att的值包含”val”字符串的元素。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
}
input[type="checkbox"]{/*匹配type类型为checkbox的input标签*/
    backgroud-color:red;
}
input[id^="i"]{/*匹配id名以i开头的input标签*/
    background-color:red;
}
input[id$="t"]{/*匹配id名以t结尾的input标签*/
     background-color:red;
}
input[class*="t"]{/*匹配class名包含t的input标签*/
     background-color:red;
}
</style>
</head>
<body>
    <form action="">
        <input type="checkbox">
        <input type="text" id="input"/>
        <input type="text" class="input"/>
        <input type="text" class="input"/>
    </form>
</body>
</html>

伪类选择器：（与用户界面有关的伪类）
- E:enabled，匹配表单中可用状态的元素。
- E:disabled，匹配表单中不可用状态的元素。
- E:checked，匹配表单中被选中的radio（单选框）或checkbox（复选框）元素。
- ::selection，匹配用户当前选中的元素。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 *{
 8     margin:0;
 9     padding:0;
10 }
11 input:enabled{/*匹配表单可用状态的元素*/
12    background-color: #000;
13 }
14 input:disabled{/*匹配表单不可用状态的元素*/
15     background-color: blue;
16 }
17 input:checked{/*匹配被选中的单选框radio或复选框checkbox*/
18     outline:5px solid  red;
19 }
20  ::selection{ /*用户当前选中的元素*/
21     background-color: yellow;
22     color: red;
23 </style>
24 /head>
25 <body>
26     <form action="">
27            <input type="radio" name="a" />
28            <input type="radio" name="a" />
29            <input type="checkbox">
30            <input type="text"/>
31            <input type="password"/>
32            <input type="password" disabled/>
33            <input type="submit" value="提交"/>
34     </form>
35     阿萨收到去哦哦去鞍山的去啊首都奥斯大搜达搜都去阿瓦达速度去哦我电话 吧啊实打实！
36 </body>
37 </html>

结构性伪类：
- E:nth-child(n)，匹配其E父元素的第n个子元素，第一个从1开始。
- E:nth-last-child(n)，匹配其E父元素的倒数第n个子元素，第一个从1开始。
- E:last-child，匹配E父元素的最后一个子元素，等同于:nth-last-child(1)。
- E:nth-of-type(n)，匹配其E父元素的第n个子元素，第一个从1开始，但仅匹配使用同种标签的元素。
- E:nth-last-of-type(n)，匹配其E父元素的倒数第n个子元素；但仅匹配使用同种标签的元素。
- E:first-of-type，匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)。
- E:last-of-type，匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 *{
 8     padding: 0;
 9     margin: 0;
10     list-style: none;
11 }
12 li:nth-child(2){/*匹配li父级元素第2个子节点*/
13     background-color: red;
14 } 
15 li:first-child{/*匹配li父级元素第1个子节点*/
16     background-color: #ccc;
17 }
18 li:last-child{/*匹配li父级元素最后1个子节点*/
19     background-color:blue;
20 }
21  li:nth-last-child(3){/*匹配li父级元素倒数第3个子节点*/
22     background-color: red;
23 }
24 li:nth-child(2n){/*匹配li父级元素第2的倍数个子节点*/
25     background-color:red;
26 }
27 li:nth-child(3n+1){/*匹配li父级元素以3个子节点为一组中的第1个子节点*/
28     background-color: red；
29 }
30 li:nth-of-type(3){/*匹配li父级且仅匹配同种类型为li，第3个子节点li*/
31 
32     background-color:red;
33 }
34 li:first-of-type{/*匹配li父级且仅匹配同种类型为li，第1个子节点li*/
35     background-color:red;
36 }
37 li:last-of-type{/*匹配li父级且仅匹配同种类型为li，最后1个子节点li*/
38     background-color:red;
39 }
40 li:nth-last-of-type(3){/*匹配li父级且仅匹配同种类型为li，倒数第3个子节点li*/
41     
42     background-color:red;
43 }
44 </style>
45 </head>
46 <body>
47 <ul>
48     <li id="one">1</li>
49     <li id="two">2</li>
50     <li id="three">3</li>
51     <li id="four" class="a">4</li>
52     <li id="five">5</li>
53     <li id="six">6</li>
54     <li id="seven">7</li>
55     <li id="eight">8</li>
56     <li id="nine">9</li>
57     <li id="ten">10
58         <div>asdas</div>
59     </li>
60 </ul>
61     <form action="">
62         <input type="radio" name="a" />
63         <input type="radio" name="a" />
64         <input type="checkbox">
65         <input type="text" id="t1t"/>
66         <input type="password" id="t2t"/>
67         <input type="password" disabled/>
68         <input type="submit" value="提交"/>
69     </form>
70     阿萨收到去哦哦去鞍山的去啊首都奥斯大搜达搜都去阿瓦达速度去哦我电话 吧啊实打实！
71 </body>
72 </html>

E:only-child，匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)。
E:only-of-type，匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)。
E:empty，匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素。

反伪类选择器：E:not(s)，匹配不符合当前选择器的任何元素。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 *{
 8     padding: 0;
 9     margin: 0;
10     list-style: none;
11 }
12 li:not(.a){/*li父级元素，匹配除了class名为a的li所有li*/
13     background-color: red;
14 }
15 </style>
16 </head>
17 <body>
18 <ul>
19     <li id="one">1</li>
20     <li id="two">2</li>
21     <li id="three">3</li>
22     <li id="four" class="a">4</li>
23     <li id="five">5</li>
24     <li id="six">6</li>
25     <li id="seven">7</li>
26     <li id="eight">8</li>
27     <li id="nine">9</li>
28     <li id="ten">10
29         <div>asdas</div>
30     </li>
31 </ul>
32 </body>
33 </html>

css3选择器,布布扣,bubuko.com

css3选择器

码农公寓

相关文章