CSS3中的常用選擇器使用示例整理

1. 根選擇器 :root
:root{}就等同于html{}, 一般來(lái)說(shuō), 推薦使用:root{}.
- <style>
- :root {
- background:green;
- }
- </style>
- <div>:root選擇器的演示</div>
2. 否定選擇器 :not
否定選擇器, 就是除此之外的
- <style>
- input:not([type="submit"]) {
- border: 1px solid red;
- }
- </style>
- <form action="#">
- <div>
- <label for="name">賬號(hào):</label>
- <input type="text" name="name" id="name" placeholder="請(qǐng)?zhí)顚?xiě)賬號(hào)" />
- </div>
- <div>
- <label for="password">密碼:</label>
- <input type="password" name="password" id="password" placeholder="請(qǐng)?zhí)顚?xiě)密碼" />
- </div>
- <div>
- <input type="submit" value="Submit" />
- </div>
- </form>
3. 空選擇器 :empty
注意: :empty 只對(duì)一點(diǎn)內(nèi)容都沒(méi)有的元素生效, 哪怕有一個(gè)空格都不行.
- <style>
- div:empty {
- border: 1px solid green;
- }
- </style>
- <div>我這里有內(nèi)容</div>
- <div> <!-- 我這里有一個(gè)空格 --></div>
- <div></div><!-- 我這里任何內(nèi)容都沒(méi)有 -->
4.目標(biāo)選擇器 :target
超鏈接地址, 與id對(duì)應(yīng)
- <style>
- .not_show{
- display: none;
- }
- #test:target{
- display:block;
- }
- </style>
- <h2><a href="#test">test</a></h2>
- <div class="not_show" id="test">
- 這是一個(gè)測(cè)試
- </div>
- <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>
- <div id="pipi">
- content for pipi
- </div>
- <h2><a href="#ruby">ruby</a></h2>
- <div id="ruby">
- content for ruby
- </div>
- <h2><a href="#aaron">Brand</a></h2>
- <div id="aaron">
- content for aaron
- </div>
5. 第一個(gè)與最后一個(gè)子元素 :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 偶數(shù)*/
- ul li:nth-child(2n) {
- color:green;
- }
- /* 用關(guān)鍵詞 odd, 表示偶數(shù), 效果同上
- ul li:nth-child(odd) {
- color:green;
- }
- */
- /*2n+1 奇數(shù)*/
- ul li:nth-child(2n+1) {
- color:red;
- }
- /* 用關(guān)鍵詞 even, 表示奇數(shù), 效果同上
- ul li:nth-child(even) {
- color:red;
- }
- */
- /* 指定子元素索引 */
- ul li:nth-child(5) {
- background: #08c;
- }
- /* 倒數(shù)第五個(gè) */
- 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. 第一個(gè)與最后一個(gè)匹配類型的子元素 first-of-type last-of-type
- <style>
- .wrapper > p:first-of-type {
- background: green;
- }
- .wrapper > p:last-of-type {
- background: orange;
- }
- </style>
- <div class="wrapper">
- <div>我是一個(gè)塊元素,我是.wrapper的第一個(gè)子元素</div>
- <p>我是一個(gè)段落元素,我是不是.wrapper的第一個(gè)子元素,但是他的第一個(gè)段落元素</p>
- <p>我是一個(gè)段落元素</p>
- <div>我是一個(gè)塊元素</div>
- </div>
8. 指定匹配類型子元素選擇器/匹配類型奇偶選擇器 :nth-of-type(n) :nth-last-of-type(n)
- <style>
- .wrapper > p:nth-of-type(2n){
- background: orange;
- }
- </style>
- <div class="wrapper">
- <div>我是一個(gè)Div元素</div>
- <p>我是一個(gè)段落元素</p>
- <div>我是一個(gè)Div元素</div>
- <p>我是一個(gè)段落</p>
- <div>我是一個(gè)Div元素</div>
- <p>我是一個(gè)段落</p>
- <div>我是一個(gè)Div元素</div>
- <p>我是一個(gè)段落</p>
- <div>我是一個(gè)Div元素</div>
- <p>我是一個(gè)段落</p>
- <div>我是一個(gè)Div元素</div>
- <p>我是一個(gè)段落</p>
- <div>我是一個(gè)Div元素</div>
- <p>我是一個(gè)段落</p>
- <div>我是一個(gè)Div元素</div>
- <p>我是一個(gè)段落</p>
- </div>
9. 唯一子元素選擇器 only-child
匹配的元素的父元素中僅有一個(gè)子元素,而且是一個(gè)唯一的子元素
- <style>
- .post p:only-child {
- background: orange;
- }
- </style>
- <div class="post">
- <p>我是一個(gè)段落</p>
- <p>我是一個(gè)段落</p>
- </div>
- <div class="post">
- <p>我是一個(gè)段落</p>
- </div>
10. 唯一匹配類型的子元素 only-of-type
- <style>
- .wrapper > div:only-of-type {
- background: orange;
- }
- </style>
- <div class="wrapper">
- <p>我是一個(gè)段落</p>
- <p>我是一個(gè)段落</p>
- <p>我是一個(gè)段落</p>
- <div>我是一個(gè)Div元素</div>
- </div>
- <div class="wrapper">
- <div>我是一個(gè)Div</div>
- <ul>
- <li>我是一個(gè)列表項(xiàng)</li>
- </ul>
- <p>我是一個(gè)段落</p>
- </div>
11. 可用選擇器 :enabled
- <style>
- div{
- margin: 20px;
- }
- input[type="text"]:enabled {
- background: #ccc;
- border: 2px solid red;
- }
- </style>
- <form action="#">
- <div>
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" placeholder="可用輸入框" />
- </div>
- <div>
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" placeholder="禁用輸入框" disabled="disabled" />
- </div>
- </form>
12. 不可用選擇器 :disabled
- <style>
- form {
- margin: 50px;
- }
- div {
- 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="#">
- <div>
- <input type="text" name="name" id="name" placeholder="我是可用輸入框" />
- </div>
- <div>
- <input type="text" name="name" id="name" placeholder="我是不可用輸入框" disabled />
- </div>
- </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="#">
- <div class="wrapper">
- <div class="box">
- <input type="checkbox" checked="checked" id="usename" /><span>√</span>
- </div>
- <lable for="usename">我是選中狀態(tài)</lable>
- </div>
- <div class="wrapper">
- <div class="box">
- <input type="checkbox" id="usepwd" /><span>√</span>
- </div>
- <label for="usepwd">我是未選中狀態(tài)</label>
- </div>
- </form>
14. 被鼠標(biāo)選中, 高亮選擇器 ::selection
- <style>
- ::-moz-selection {
- background: red;
- color: green;
- }
- ::selection {
- background: red;
- color: green;
- }
- </style>
- <p>拿鼠標(biāo)選中我, 試試看!</p>
15. 只讀選擇器 :read-only
- <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;
- }
- </style>
- <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="中國(guó)上海" readonly />
- </div>
- </form>
16. 非只讀選擇器 :read-write
- <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;
- }
- </style>
- <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" placeholder="中國(guó)上海" readonly="readonly" />
- </div>
- </form>
相關(guān)文章
css3之UI元素狀態(tài)偽類選擇器實(shí)例演示
這篇文章主要介紹了css3之UI元素狀態(tài)偽類選擇器 ,其中包括hover、active和focus,enabled,disabledread-only與read-write 等等,需要的朋友可以參考下2017-08-11- 本文總結(jié)了30個(gè)CSS3選擇器,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-13
- 這篇文章主要介紹了css3類選擇器之結(jié)合元素選擇器和多類選擇器用法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-09
IE8下CSS3選擇器nth-child() 不兼容問(wèn)題的解決方法
這篇文章主要介紹了IE8下CSS3選擇器nth-child() 不兼容問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-16- 下面小編就為大家?guī)?lái)一篇對(duì)CSS3選擇器的研究(詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-09-16
- CSS3的諸多革命性改進(jìn)中,對(duì)屬性選擇器的增強(qiáng)絕對(duì)是亮點(diǎn)之一,這里我們就來(lái)詳解CSS3中屬性選擇器新增加的特性,需要的朋友可以參考下2016-07-11
- 這篇文章主要介紹了CSS3 新增選擇器的實(shí)例,需要的朋友可以參考下2019-11-13