Share common selector usage examples in CSS3

高洛峰
Release: 2017-03-09 10:07:19
Original
1339 people have browsed it

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>
Copy after login


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>
Copy after login


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><!-- 我这里任何内容都没有 -->
Copy after login


4. Target selector: target
hyperlink address, corresponding to the 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>
Copy after login

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>
Copy after login


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>
Copy after login


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>
Copy after login

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>
Copy after login


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>
Copy after login


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>
Copy after login


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>
Copy after login



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>
Copy after login


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>
Copy after login


14. Selected by mouse, highlight selector::selection

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


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>
Copy after login


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>
Copy after login


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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!