Share common selector usage examples in CSS3

1. Root selector: root

:root{} is equivalent to html{}. Generally speaking, it is recommended to use: root{}.

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

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

2. Negative selector: not
Negative selector, that is, other than that

<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 selector:empty
Note: :empty only takes effect on elements with no content at all, even if there is a space.

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

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

4. Target selector: target
hyperlink address, corresponding to the id

<style>   
.not_show{   
    display: none;   
}   

#test:target{   
    display:block;   
}   
</style>   


<h2 id="a-nbsp-href-test-test-a"><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 id="a-nbsp-href-pipi-pipi-a"><a href="#pipi">pipi</a></h2>   
<p id="pipi">   
    content for pipi   
</p>   

<h2 id="a-nbsp-href-ruby-ruby-a"><a href="#ruby">ruby</a></h2>   
<p id="ruby">   
    content for ruby   
</p>   

<h2 id="a-nbsp-href-aaron-Brand-a"><a href="#aaron">Brand</a></h2>   
<p id="aaron">   
    content for aaron   
</p>

5. The first one with The last child element: 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. Specify the child element selector/odd-even selector: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. The first and last matching type of child elements 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. Specify matching type sub-element selector/matching type parity selector: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. The only child element selector only-child
matches the element’s parent element only There is one child element, and it is a unique child element

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

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

10. The only matching child element of type only-of-type

<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. Available selectors:enabled

<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. Unavailable selector: disabled

<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. Selected selector: checked

<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. Selected by mouse, highlight selector::selection

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

15. Read-only selector: read-only

<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. Non-read-only selector: read-write

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

The above is the detailed content of Share common selector usage examples in CSS3. For more information, please follow other related articles on the PHP Chinese website!