Teilen Sie Beispiele für die Verwendung gängiger Selektoren in CSS3

1. Root-Selektor:root

:root{} ist äquivalent zu html{}.

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

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

2. Negativer Selektor: nicht
Negativer Selektor, das heißt

<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. Leerer Selektor:empty
Hinweis: :empty wirkt sich nur auf Elemente aus, die überhaupt keinen Inhalt haben, auch wenn ein Leerzeichen vorhanden ist.

<style>   
p:empty {   
    border: 1px solid green;   
}   
</style>   

<p>我这里有内容</p>   
<p> <!-- 我这里有一个空格 --></p>   
<p></p><!-- 我这里任何内容都没有 -->

4. Zielselektor: Ziel
Hyperlinkadresse, entsprechend der 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>

5 und letzte untergeordnete Elemente: erstes Kind: letztes Kind

<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. Geben Sie die Auswahl des untergeordneten Elements an (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. Das erste und letzte übereinstimmende untergeordnete Element vom Typ „First-of-Type“ und „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. Geben Sie den Selektor für das untergeordnete Element des passenden Typs/den ungeraden/geraden Selektor des passenden Typs an: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>

Nur ​​untergeordneter Elementselektor -child
Das übereinstimmende Element hat nur ein untergeordnetes Element in seinem übergeordneten Element, und es ist ein eindeutiges untergeordnetes Element

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

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

10 Passt eindeutig zu untergeordneten Elementen vom Typ only-of -Typ

<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. Verfügbare Selektoren: aktiviert

<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. Nicht verfügbarer Selektor: deaktiviert

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

13. geprüft

<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="#">   
    <p class="wrapper">   
        <p class="box">   
          <input type="checkbox" checked="checked" id="usename" /><span>√</span>   
        </p>   
        <lable for="usename">我是选中状态</lable>   
    </p>   

    <p class="wrapper">   
        <p class="box">   
          <input type="checkbox"  id="usepwd" /><span>√</span>   
        </p>   
        <label for="usepwd">我是未选中状态</label>   
    </p>   
</form>

14. Ausgewählt mit der Maus, High Bright selector::selection

<style>   
::-moz-selection {   
    background: red;   
    color: green;   
}   
::selection {   
    background: red;   
    color: green;   
}   
</style>   
<p>拿鼠标选中我, 试试看!</p>

15. Schreibgeschützter Selektor: schreibgeschützt

<style>   
form {   
    width: 300px;   
    padding: 10px;   
    border: 1px solid #ccc;   
    margin: 50px auto;   
}   
form > p {   
    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="#">   
    <p>   
        <label for="name">姓名:</label>   
        <input type="text" name="name" id="name" placeholder="大漠" />   
    </p>   
    <p>   
        <label for="address">地址:</label>   
        <input type="text" name="address" id="address" value="中国上海" readonly />   
    </p>   
</form>

16 -nur Selektor: Lesen/Schreiben

<style>   
form {   
    width: 300px;   
    padding: 10px;   
    border: 1px solid #ccc;   
    margin: 50px auto;   
}   
form > p {   
    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="#">   
    <p>   
        <label for="name">姓名:</label>   
        <input type="text" name="name" id="name" placeholder="大漠" />   
    </p>   
    <p>   
        <label for="address">地址:</label>   
        <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />   
    </p>   
</form>

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Verwendung gängiger Selektoren in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!