1. 根选择器 :root。
:root{}就等同于html{}, 一般来说, 推荐使用:root{}
|
1 2 3 |
:root { background:green; } |
2. 属性选择器 :[]。
|
1 2 3 |
input[type="submit"] { border: 1px solid red; } |
3. 否定选择器 :not。
否定选择器, 就是除此之外的。和jQuery中的:not一个意思。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> input:not([type="submit"]) { border: 1px solid red; } </style> <form action="#"> <div> <label for="name">账号:</label> <input type="text" name="name" id="name" placeholder="请填写账号" /> </div> <div> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="请填写密码" /> </div> <div> <input type="submit" value="Submit" /> </div> </form> |
4. 空选择器 :empty。
注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行。个人觉得没多大意思，如果一个元素一点内容都没有，还要它干嘛。我能想到的，就是当我们定义弹出类的插件时，一般都会定义一个背景阴影，那里面是没内容的。
|
1 2 3 4 5 6 7 8 9 |
<style> div:empty { border: 1px solid green; } </style> <div>我这里有内容</div> <div> <!-- 我这里有一个空格 --></div> <div></div><!-- 我这里任何内容都没有 --> |
5. 第一个与最后一个子元素 :first-child :last-child。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> ul li:first-child a { color:green; } ul li:last-child a { color:red; } </style> <ul> <li><a href="##">Link1</a></li> <li><a href="##">Link2</a></li> <li><a href="##">Link3</a></li> <li><a href="##">Link4</a></li> <li><a href="##">Link5</a></li> </ul> |
6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<style> /*2n 偶数*/ ul li:nth-child(2n) { color:green; } /* 用关键词 odd, 表示偶数, 效果同上 ul li:nth-child(odd) { color:green; } */ /*2n+1 奇数*/ ul li:nth-child(2n+1) { color:red; } /* 用关键词 even, 表示奇数, 效果同上 ul li:nth-child(even) { color:red; } */ /* 指定子元素索引 */ ul li:nth-child(5) { background: #08c; } /* 倒数第五个 */ ul li:nth-last-child(5){ background: yellow; } </style> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> </ul> |
7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type，分别选择匹配类型元素的第一个和最后一个。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .wrapper > p:first-of-type { background: green; } .wrapper > p:last-of-type { background: orange; } </style> <div class="wrapper"> <div>我是一个块元素，我是.wrapper的第一个子元素</div> <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p> <p>我是一个段落元素</p> <div>我是一个块元素</div> </div> |
8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> .wrapper > p:nth-of-type(2n){ background: orange; } </style> <div class="wrapper"> <div>我是一个Div元素</div> <p>我是一个段落元素</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> <div>我是一个Div元素</div> <p>我是一个段落</p> </div> |
晃眼一看，P标签的索引全是2N，但并非如此，:nth-of-type仅针对的是所有p元素，你就把它当做除P之外的标签都不存在，然后再来找满足索引为2n的。
9. 唯一子元素选择器 only-child。
匹配的元素是独生子，没有兄弟元素，而且是一个唯一的子元素。（而不是一个只有一个元素的父元素）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .post{ border:1px solid #f00; padding:20px; } .post p:only-child { background: orange; } </style> <div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div> |
10. 唯一匹配类型的子元素 only-of-type
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> .wrapper > div:only-of-type { background: orange; } </style> <div class="wrapper"> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div>我是一个Div元素</div> </div> <div class="wrapper"> <div>我是一个Div</div> <ul> <li>我是一个列表项</li> </ul> <p>我是一个段落</p> <div>我是一个Div</div> </div> |
第一个盒子里的div能匹配到，但第二个不能。因为在第二个里div有两个，不唯一。
11. 关于input的三个选择器，可用选择器 :enabled，不可用选择器 :disabled，被选中选择器 :checked。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<style> div{ margin: 20px; } input[type="text"]:enabled { background: #ccc; border: 2px solid green; } input[type="checkbox"] + span { color: #000; font-weight:bold; } input[type="checkbox"]:checked + span { color:green; } </style> <form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="可用输入框1" /> </div> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="可用输入框2" /> </div> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="禁用输入框1" disabled="disabled" /> </div> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="禁用输入框2" disabled="disabled" /> </div> <div class="wrapper"> <div class="box"> <input type="checkbox" checked="checked" id="usename" /><span>√</span> </div> <lable for="usename">我是选中状态</lable> </div> <div class="wrapper"> <div class="box"> <input type="checkbox" id="usepwd" /><span>√</span> </div> <label for="usepwd">我是未选中状态</label> </div> </form> |
12. 比较冷门的几个选择器，只读选择器 :read-only，非只读选择器 :read-write，高亮选择器 ::selection。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<style> form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; } form > div { margin-bottom: 10px; } input[type="text"]{ border: 1px solid orange; padding: 5px; background: #fff; border-radius: 5px; } input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; } input[type="text"]:-moz-read-write{ border-color: #f36; } input[type="text"]:read-write{ border-color: #f36; } ::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; } </style> <p>拿鼠标选中我, 试试看!</p> <form action="#"> <div> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </div> <div> <label for="address">地址:</label> <input type="text" name="address" id="address" value="中国上海" readonly /> </div> <div> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </div> <div> <label for="address">地址:</label> <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> </div> </form> |
在网站中，你可以用::selection选择器把字体颜色和背景颜色设置为同一个颜色，给人一种文字无法选中的感觉。
发表评论