CSS3 挑选器

种种挑选器你都知道吗？下面逐一为你排列一下。

1.标签挑选器

标签挑选器又叫元素挑选器，换句话说，文档的元素就是最基本的挑选器，运用元素称号直接选中元素即可。

比方 以下p标签即可直接挑选

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

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

2.类挑选器

类挑选以点”.”开首，背面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。一个元素能够有多个class的值，每一个值经由过程空格分割开。类名雷同的元素属于一类元素。

比方 以下class内里的类

<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挑选

<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的一切子元素

<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.属性挑选器

属性挑选器有以下几种

比方以下，就是挑选button中具有name属性的元素而且name的值为del的元素

<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>

7.伪类挑选器

伪类以”:”开首，用在挑选器后，用于指明元素在某种特别的状况下才被选中

• 7.1示意子元素

• 7.2 与状况相干

伪元素挑选器

伪元素以”::”开首，用在挑选器后，用于挑选指定的元素