分享CSS3中的常用选择器使用示例整理
程序员文章站
2022-04-06 21:26:12
...
1. 根选择器 :root
:root{}就等同于html{}, 一般来说, 推荐使用:root{}.
<style> :root { background:green; } </style> <p>:root选择器的演示</p>
2. 否定选择器 :not
否定选择器, 就是除此之外的
<style> input:not([type="submit"]) { border: 1px solid red; } </style> <form action="#"> <p> <label for="name">账号:</label> <input type="text" name="name" id="name" placeholder="请填写账号" /> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="请填写密码" /> </p> <p> <input type="submit" value="Submit" /> </p> </form>
3. 空选择器 :empty
注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.
<style> p:empty { border: 1px solid green; } </style> <p>我这里有内容</p> <p> <!-- 我这里有一个空格 --></p> <p></p><!-- 我这里任何内容都没有 -->
4.目标选择器 :target
超链接地址, 与id对应
<style> .not_show{ display: none; } #test:target{ display:block; } </style> <h2><a href="#test">test</a></h2> <p class="not_show" id="test"> 这是一个测试 </p> <style> #pipi:target { background: orange; color: #fff; } #ruby:target { background: blue; color: #fff; } #aaron:target { background: red; color: #fff; } </style> <h2><a href="#pipi">pipi</a></h2> <p id="pipi"> content for pipi </p> <h2><a href="#ruby">ruby</a></h2> <p id="ruby"> content for ruby </p> <h2><a href="#aaron">Brand</a></h2> <p id="aaron"> content for aaron </p>
5. 第一个与最后一个子元素 :first-child :last-child
<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)
<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
<style> .wrapper > p:first-of-type { background: green; } .wrapper > p:last-of-type { background: orange; } </style> <p class="wrapper"> <p>我是一个块元素,我是.wrapper的第一个子元素</p> <p>我是一个段落元素,我是不是.wrapper的第一个子元素,但是他的第一个段落元素</p> <p>我是一个段落元素</p> <p>我是一个块元素</p> </p>
8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)
<style> .wrapper > p:nth-of-type(2n){ background: orange; } </style> <p class="wrapper"> <p>我是一个p元素</p> <p>我是一个段落元素</p> <p>我是一个p元素</p> <p>我是一个段落</p> <p>我是一个p元素</p> <p>我是一个段落</p> <p>我是一个p元素</p> <p>我是一个段落</p> <p>我是一个p元素</p> <p>我是一个段落</p> <p>我是一个p元素</p> <p>我是一个段落</p> <p>我是一个p元素</p> <p>我是一个段落</p> <p>我是一个p元素</p> <p>我是一个段落</p> </p>
9. 唯一子元素选择器 only-child
匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素
<style> .post p:only-child { background: orange; } </style> <p class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </p> <p class="post"> <p>我是一个段落</p> </p>
10. 唯一匹配类型的子元素 only-of-type
<style> .wrapper > p:only-of-type { background: orange; } </style> <p class="wrapper"> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个p元素</p> </p> <p class="wrapper"> <p>我是一个p</p> <ul> <li>我是一个列表项</li> </ul> <p>我是一个段落</p> </p>
11. 可用选择器 :enabled
<style> p{ margin: 20px; } input[type="text"]:enabled { background: #ccc; border: 2px solid red; } </style> <form action="#"> <p> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="可用输入框" /> </p> <p> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" /> </p> </form>
12. 不可用选择器 :disabled
<style> form { margin: 50px; } p { margin-bottom: 20px; } input { background: #fff; padding: 10px; border: 1px solid orange; border-radius: 3px; } input[type="text"]:disabled { background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15); color: rgba(0,0,0,.15); } </style> <form action="#"> <p> <input type="text" name="name" id="name" placeholder="我是可用输入框" /> </p> <p> <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled /> </p> </form>
13. 被选中选择器 :checked
<style> form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 30px auto; } .wrapper { margin-bottom: 10px; } .box { display: inline-block; width: 20px; height: 20px; margin-right: 10px; position: relative; border: 2px solid orange; vertical-align: middle; } .box input { opacity: 0; positon: absolute; top:0; left:0; } .box span { position: absolute; top: -10px; rightright: 3px; font-size: 30px; font-weight: bold; font-family: Arial; -webkit-transform: rotate(30deg); transform: rotate(30deg); color: orange; } input[type="checkbox"] + span { opacity: 0; } input[type="checkbox"]:checked + span { opacity: 1; } </style> <form action="#"> <p class="wrapper"> <p class="box"> <input type="checkbox" checked="checked" id="usename" /><span>√</span> </p> <lable for="usename">我是选中状态</lable> </p> <p class="wrapper"> <p class="box"> <input type="checkbox" id="usepwd" /><span>√</span> </p> <label for="usepwd">我是未选中状态</label> </p> </form>
14. 被鼠标选中, 高亮选择器 ::selection
<style> ::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; } </style> <p>拿鼠标选中我, 试试看!</p>
15. 只读选择器 :read-only
<style> form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; } form > p { 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; } </style> <form action="#"> <p> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </p> <p> <label for="address">地址:</label> <input type="text" name="address" id="address" value="中国上海" readonly /> </p> </form>
16. 非只读选择器 :read-write
<style> form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; } form > p { 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; } </style> <form action="#"> <p> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </p> <p> <label for="address">地址:</label> <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> </p> </form>
以上就是分享CSS3中的常用选择器使用示例整理的详细内容,更多请关注其它相关文章!
上一篇: css nav-left属性怎么用