CSS3 での一般的なセレクターの使用例を共有する-CSSチュートリアル-php.cn

CSS3 での一般的なセレクターの使用例を共有する

高洛峰

リリース： 2017-03-09 10:07:19

オリジナル

1338 人が閲覧しました

1. ルートセレクター: root

:root{} は html{} と同等です。

<style>   
:root {   
  background:green;   
}   
</style>   

<p>:root选择器的演示</p>

ログイン後にコピー

2. 負のセレクター、それ以外はすべてです

<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. ターゲットセレクター: 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>

ログイン後にコピー

に対応するターゲット
ハイパーリンクアドレス: 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

は、親要素に子要素が1つだけある要素と一致し、それはonly-of-type

型の唯一の子要素

<style>   
    .post p:only-child {   
      background: orange;   
    }   
</style>   

<p class="post">   
    <p>我是一个段落</p>   
    <p>我是一个段落</p>   
</p>   
<p class="post">   
    <p>我是一个段落</p>   
</p>

ログイン後にコピー

です。

<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. 利用可能なセレクター: 有効

<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. 利用できないセレクター: 無効

13. 選択されたセレクター: チェック済み

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

ログイン後にコピー

14. マウスで選択、強調表示された selector::selection

15. 読み取り専用セレクター: 読み取り専用

16. 非読み取り専用セレクター: read-書く

りー

以上がCSS3 での一般的なセレクターの使用例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。