Rumah  >  Artikel  >  hujung hadapan web  >  CSS的子代选择符

CSS的子代选择符

php中世界最好的语言
php中世界最好的语言asal
2018-03-20 15:22:023712semak imbas

这次给大家带来CSS的子代选择符,使用CSS的子代选择符的注意事项有哪些,下面就是实战案例,一起来看一下。

后代选择符用于选取一个标签的所有后代,包括子代和孙辈等;而子代选择符只选取指定父辈的子代标签(指定标签元素的第一代子元素)。

子代选择符使用一个额外的符号(尖括号> )表明两个元素之间的关系。

例如:body>h1 选取的是标签里的所有第一代

标签。

HTML标签的关系图

HTML代码

<h1>body里面的h1标题</h1>
<p>
    <h2>p里面的h2</h2>
    <p>
        p里面的p标签,p标签里面有一个<strong><a href="#">加粗的链接</a></strong>
    </p>
</p>
<h2>body里面的h2标题</h2>
<ul>
    <li>列表1
        <ul>
            <li>小列表a</li>
            <li>小列表b</li>
            <li>小列表c</li>
        </ul>
    </li>
    <li>
        <a href="#">列表2(带链接)</a>
    </li>
    <li>
        <a href="#">列表3(带链接)</a>
    </li>
</ul>

弄懂上面的结构之后,可以试试下面代码:

CSS代码

body>h2 {
    color: orange;
}

上面HTML代码里面,一共有2个

标签,但只有一个子代的

,另一个

是在

里面的,所以上面的CSS代码只作用在第一个

标签。

下面是比较好玩的子选择符

:first-child

选取第一个子标签。

CSS代码

h2:first-child {
    color: orange;
}

这个选择符的作用是:先找到网页中所有

标签,通过

标签找到其父元素,再判断

标签在其父元素中是否排第一个。

这里因为的第一个标签是

,所以的子元素

没被样式作用到。

因为

里的

的第一个子元素,所以

里的

变成了橙色字。

:last-child

这个选择符与 :first-child 选择符的作用类似,不过选取的是一个元素的最后一个子代。

CSS代码

li:last-child {
    font-size: 2em;
}

可以看到,“小列表C”和“列表3(带链接)”的字号变大了。因为这两项都是被指定的最后一项。

:only-child

选取某个元素唯一的子代。

HTML代码

<p>
    <p>第一个p的p</p>
</p>
<p>
    <p>第二个p的第一个p</p>
    <a href="#">第二个p的第一个a</a>
</p>

CSS代码

p:only-child {
    color: orange;
}

上述样式只作用在第一个

元素。第二个

里因为不止

元素,还有元素,所以第二个

元素不会被上述样式影响。

这个选择符比较难理解。仅当指定的标签是另一个标签的唯一子代时,这个选择符定义的样式才有效。也就是说,子代中只有一个指定的标签还不行,如果指定的标签有其他同辈标签,这个选择符定义的样式就会失效。

:nth-child

这个选择符用法比较复杂,不过也特别有用。

这个选择符可以轻易地为表格中相隔的行、列表中相隔两个项目的项目或相隔其他数目的子代元素定义样式。

这个选择符需要一个值,用于确定选取哪些子代。

其中最简单的值是关键字,即odd和even。

  1. odd用于选取奇数子代元素。

  2. even用于选取偶数子代元素。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

CSS代码

li:nth-child(odd) {
    background: pink;
}
li:nth-child(even) {
    background: teal;
}

第一个子元素的下标是 1。

需要注意的是,如果在第一个

  • 之前还有其他元素,那第一个
  • 的下标就不是1了。
    比如

    HTML代码

    <ul>
        <a href="#">a</a>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>

    这时的效果是

    li:nth-child(odd) 的意思是找到

  • 元素的父元素,通过父元素来检测每一个
  • 的下标的奇偶。

    因为

  • Kenyataan:
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel sebelumnya:使用html和css实现康奈尔笔记Artikel seterusnya:纯css实现树形结构