分享CSS3中的常用选择器使用示例整理-css教程-PHP中文网

首页

web前端

css教程

分享CSS3中的常用选择器使用示例整理

高洛峰

Mar 09, 2017 am 10:07 AM

1. 根选择器 :root

:root{}就等同于html{}, 一般来说, 推荐使用:root{}.

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

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

2. 否定选择器 :not
否定选择器, 就是除此之外的

<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.目标选择器 :target
超链接地址, 与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. 第一个与最后一个子元素 :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
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素

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

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

10. 唯一匹配类型的子元素 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. 可用选择器 :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. 不可用选择器 :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. 被选中选择器 :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. 被鼠标选中, 高亮选择器 ::selection

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

15. 只读选择器 :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. 非只读选择器 :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>

以上是分享CSS3中的常用选择器使用示例整理的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

这么多颜色链接Apr 13, 2025 am 11:36 AM

最近有一系列有关颜色的工具，文章和资源。请允许我通过将它们四舍五之后关闭几个标签，以供您享受。

自动利润在Flexbox中的工作方式Apr 13, 2025 am 11:35 AM

罗宾以前已经介绍过这一点，但是我在过去的几周里听到了一些关于它的困惑，看到另一个人在解释它，我想

移动彩虹Apr 13, 2025 am 11:27 AM

我绝对喜欢三明治网站的设计。在许多美丽的功能中，这些标题是滚动时带有彩虹的下线。它不是

新年，新工作？让我们做一个网格驱动的简历！Apr 13, 2025 am 11:26 AM

许多流行的简历设计通过以网格形状铺设部分来充分利用可用的页面空间。让我们使用CSS网格创建一个布局

将用户摆脱过多习惯的一种方法Apr 13, 2025 am 11:25 AM

页面重新加载是一回事。有时，当我们认为它没有响应或认为新内容可用时，我们会刷新页面。有时我们只是生气

域驱动的设计与ReactApr 13, 2025 am 11:22 AM

关于如何在React世界中组织前端应用的指导很少。（只需移动文件，直到“感觉正确”，大声笑）。真相

检测非活动用户Apr 13, 2025 am 11:08 AM

大多数情况下，您并不真正在乎用户是否积极参与或暂时非活动。不活跃，意思，也许他们

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo一直在集成方面非常出色。他们与特定应用程序（例如广告系列显示器，MailChimp和Typekit）进行集成，但他们也

See all articles

热AI工具

热工具

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中