Partager des exemples d'utilisation courants des sélecteurs en CSS3-tutoriel CSS-php.cn

Partager des exemples d'utilisation courants des sélecteurs en CSS3

高洛峰

Libérer： 2017-03-09 10:07:19

original

1378 Les gens l'ont consulté

1. Sélecteur de racine : root

:root{} est équivalent à html{} De manière générale, il est recommandé d'utiliser :root{}.

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

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

Copier après la connexion

2. Sélecteur négatif : non
Sélecteur négatif, c'est-à-dire

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

Copier après la connexion

3. Sélecteur vide : vide
Remarque : vide ne prend effet que sur les éléments sans contenu, même s'il y a un espace.

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

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

Copier après la connexion

4. Sélecteur de cible : cible
adresse du lien hypertexte, correspondant à l'identifiant

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

Copier après la connexion

5. et derniers éléments enfants : 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>

Copier après la connexion

6. (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>

Copier après la connexion

7 Le premier et le dernier type correspondant Élément enfant premier du type dernier du 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>

Copier après la connexion

8. Spécifiez le sélecteur d'élément enfant de type correspondant/le sélecteur pair-impair de type correspondant : 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>

Copier après la connexion

9. Seul le sélecteur d'élément enfant uniquement -enfant
L'élément correspondant n'a que un élément enfant dans son élément parent, et il s'agit d'un élément enfant unique

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

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

Copier après la connexion

Correspond de manière unique aux éléments enfants de type uniquement-de. -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>

Copier après la connexion

11. Sélecteurs disponibles : activés

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

Copier après la connexion

12. Sélecteur indisponible : désactivé

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

Copier après la connexion

13. sélecteur : coché

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

Copier après la connexion

14 Sélectionné par la souris, sélecteur High Bright ::selection

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

Copier après la connexion

15. Sélecteur en lecture seule : lecture seule

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

Copier après la connexion

16. Sélecteur non en lecture seule : lecture-écriture

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!