CSS3 選擇器

時間 2019-11-11

標籤 css3 css 選擇器欄目 CSS 简体版

原文原文鏈接

CSS3 選擇器

各類選擇器你都知道嗎？下面一一爲你羅列一下。css

1.標籤選擇器

標籤選擇器又叫元素選擇器，換句話說，文檔的元素就是最基本的選擇器，使用元素名稱直接選中元素便可。

例如以下p標籤便可直接選擇spa

<style>
        p{
            height:100px;
            border:1px solid red;
        }
        
    </style>

    <p>one</p>
    <p>two</p>
    <p>three</p>

2.類選擇器

類選擇以點"."開頭，後面緊跟一個類名。類名不容許有空格，與元素中class屬性的值保持一致。一個元素能夠有多個class的值，每一個值經過空格分割開。類名相同的元素屬於一類元素。

例如以下class裏面的類code

<style>             
        .first{font-weight: bold;}             
        .done {text-decoration: line-through;}         
    </style>
    <ul>        
        <li class="first done">Create an HTML document</li>
        <li class="second done">Create a CSS style sheet</li>
        <li class="third done">Link them all together</li>        
    </ul>

3.ID選擇器

ID選擇器以"#"開頭，後面緊跟一個ID名，在一個文檔中，ID值不能重複，所以在選擇文檔中惟一元素的時候該選擇器比較有用。

例如以下id選擇orm

<style>            
        #polite {      font-family: cursive;}            
        #rude {    font-family: monospace;     
                   text-transform: uppercase;}
    </style>
    
    <p id="polite"> — "Good morning."</p>        
    <p id="rude"> — "Go away!"</p>

4. 廣泛選擇器

使用「*」來表示廣泛選擇器，表示選擇全部元素，一般用在組合選擇器中。

例如以下選擇的就是left-nav的全部子元素blog

<style>            
        .left-nav > * { width:200px; background-color:#fafafa}
    </style>
    
    <article class="left-nav">
         <dl>                
            <dt>推薦</dt>                
            <dd class="current"><
            i class="icon-music"></i>發現音樂</dd>        
            </dl>            
        <dl>                
            <dt>個人音樂</dt>    
                <dd><i class="icon-cloud-download">
                </i>下載的音樂</dd>            
                </dl>
    </article>

5.層次選擇器

5.1後代選擇器

使用「」隔開兩個選擇器。例如「ul li」表示選擇ul的後代元素li，li能夠爲ul的直接子元素，也能夠爲ul的孫子元素。

5.2子代選擇器

使用「>」隔開兩個選擇器。例如 "ul>li"表示選擇ul的直接子代元素li,ul的孫子元素li沒法被選擇到

5.3相鄰同胞選擇器

使用「+」隔開兩個選擇器。例如 ".one+*"表示選擇class爲"one"元素的下一個兄弟元素。

5.4通常同胞選擇器

使用「~」隔開兩個選擇器。例如 ".one~*"表示選擇class爲"one"元素的全部兄弟元素。

6.屬性選擇器

屬性選擇器有如下幾種three

例如以下，就是選擇button中具備name屬性的元素而且name的值爲del的元素ip

<style type="text/css">
        button[name=del]{
            border: 2px dotted #ccc;
        }
    </style>

<div class="container">
        <button class="addBtn" name="add">添加</button>
        <button class="delBtn" name="del">刪除</button>
        <button class="updBtn" name="upd">更新</button>
        <button>搜索</button>
    </div>