CSS3的选择器(一)

Author: 刘老师(Aaron Lau) 武汉长乐教育,武汉PHP培训课程,版权所有,转载请注明!

CSS3的选择器(一)

课程概要

  1. 根选择器 :root
  2. 否定选择器 :not
  3. 空选择器 :empty
  4. 目标选择器 :target
  5. 第一个与最后一个子元素 :first-child :last-child
  6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)
  7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type
  8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)
  9. 唯一子元素选择器 only-child

1. 根选择器 :root

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

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

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

2. 否定选择器 :not

否定选择器, 就是除此之外的

<style>
input:not([type="submit"]) {
    border: 1px solid red;
}
</style>

<form action="#">
    <div>
        <label for="name">账号:</label>
        <input type="text" name="name" id="name" placeholder="请填写账号" />
    </div>
    <div>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" placeholder="请填写密码" />
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

3. 空选择器 :empty

注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.

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

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

4.目标选择器 :target

超链接地址, 与id对应

<style>
.not_show{
    display: none;
}

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

<h2><a href="#test">test</a></h2>
<div class="not_show" id="test">
    这是一个测试
</div>
<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>
<div id="pipi">
    content for pipi
</div>

<h2><a href="#ruby">ruby</a></h2>
<div id="ruby">
    content for ruby
</div>

<h2><a href="#aaron">Brand</a></h2>
<div id="aaron">
    content for aaron
</div>

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>

<div class="wrapper">
    <div>我是一个块元素,我是.wrapper的第一个子元素</div>
    <p>我是一个段落元素,我是不是.wrapper的第一个子元素,但是他的第一个段落元素</p>
    <p>我是一个段落元素</p>
    <div>我是一个块元素</div>
</div>

8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)

<style>
    .wrapper > p:nth-of-type(2n){
        background: orange;
    }
</style>

<div class="wrapper">
    <div>我是一个Div元素</div>
    <p>我是一个段落元素</p>

    <div>我是一个Div元素</div>
    <p>我是一个段落</p>

    <div>我是一个Div元素</div>
    <p>我是一个段落</p>

    <div>我是一个Div元素</div>
    <p>我是一个段落</p>

    <div>我是一个Div元素</div>
    <p>我是一个段落</p>

    <div>我是一个Div元素</div>
    <p>我是一个段落</p>

    <div>我是一个Div元素</div>
    <p>我是一个段落</p>

    <div>我是一个Div元素</div>
    <p>我是一个段落</p>
</div>

9. 唯一子元素选择器 only-child

匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素

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

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

10. 唯一匹配类型的子元素 only-of-type

<style>
    .wrapper > div:only-of-type {
        background: orange;
    }
</style>

<div class="wrapper">
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <div>我是一个Div元素</div>
</div>
<div class="wrapper">
    <div>我是一个Div</div>
    <ul>
        <li>我是一个列表项</li>
    </ul>
    <p>我是一个段落</p>
</div>
上一篇课程 下一篇课程

学生登录