CSS3 选择器

扫码查看

CSS3 选择器

各种选择器你都知道吗?下面一一为你罗列一下。


1.标签选择器

例如 如下p标签即可直接选择

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

    </style>

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

2.类选择器

例如 如下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选择

<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后代选择器
  • 5.2子代选择器
  • 5.3相邻同胞选择器
  • 5.4一般同胞选择器

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 与状态相关

伪元素选择器

12-16 17:37
查看更多