CSS3选择器详解(下)

举报
龙哥手记 发表于 2023/01/30 20:42:01 2023/01/30
【摘要】 《前端基础 第二十九篇》

结构伪类选择器

伪类选择器的标志性符号是 :

CSS中有一些伪类选择器,比如:link:visited:hover:active:focus

CSS3又新增了其它的伪类选择器。这一小段,我们来学习CSS3中的结构伪类选择器:即通过结构来进行筛选。

1、格式:(第一部分)(重要)

  • E:first-child 匹配父元素的第一个子元素E。

  • E:last-child 匹配父元素的最后一个子元素E。

  • E:nth-child(n) 匹配父元素的第n个子元素E。注意,盒子的编号是从1开始算起,不是从0开始算起。

  • E:nth-child(odd) 匹配奇数

  • E:nth-child(even) 匹配偶数

  • E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。

理解:

(1)这里我们要好好理解父元素的含义,它指的是:以 E 元素的父元素为参考。

(2)注意:以上选择器中所选到的元素的类型,必须是指定的类型E,如果选不中,则无效。这个要好好理解,具体可以看CSS参考手册中的E:nth-child(n)的示例。我们可以理解成:先根据选择器找到选中的全部位置,如果发现某个位置不是类型E,则该位置失效

(3)另外,E:nth-child(n)这个属性也很有意思。比如,针对下面这样一组标签:

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

上方代码中:

  • 如果选择器写成li:nth-child(2),则表示第2个 li

  • 如果选择器写成li:nth-child(n),则表示所有的li。因为此时的 n 表示 0,1,2,3,4,5,6,7,8.....(当n小于1时无效,因为n = 0 也是不会选中的)

  • 如果选择器写成li:nth-child(2n),则表示所有的第偶数个 li。

  • 如果选择器写成li:nth-child(2n+1),则表示所有的第奇数个 li。

  • 如果选择器写成li:nth-child(-n+5),则表示前5个 li。

  • 如果选择器写成li:nth-last-child(-n+5),则表示最后5个 li。

  • 如果选择器写成li:nth-child(7n),则表示选中7的倍数。。

上面列举的选择器中,我们只要记住: n 表示 0,1,2,3,4,5,6,7,8.....就很容易明白了。

2、格式:(第二部分)

  • E:first-of-type 匹配同类型中的第一个同级兄弟元素E。

  • E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。

  • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。

  • E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。

既然上面这几个选择器带有type,我们可以这样理解:先在同级里找到所有的E类型,然后根据 n 进行匹配。

3、格式:(第三部分)

  • E:empty 匹配没有任何子节点(包括空格等text节点)的元素E。

  • E:target 匹配相关URL指向的E元素。要配合锚点使用。

举例:

我们可以把多个伪类选择器结合起来使用,比如:

如果想把上图中,第一行的前三个 span 标红,我们可以这样使用结构伪类选择器:

	dt:first-child span:nth-of-type(-n+3) {
		color: red;
	}

最后来张表格:

伪元素选择器

伪元素选择器的标志性符号是 ::

1、格式:(第一部分)

  • E::before 设置在 元素E 前面(依据对象树的逻辑结构)的内容,配合content属性一起使用。

  • E::after 设置在 元素E 后面(依据对象树的逻辑结构)的内容,配合content属性一起使用。

E:afterE:before在旧版本里是伪类,在 CSS3 这个新版本里是伪元素。新版本里,E:afterE:before会被自动识别为E::afterE::before,按伪元素来对待,这样做的目的是用来做兼容处理。

举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        /*::before 和::after 是通过 css 模拟出的html标签的效果*/
        span::before{
            content:"smyhvae";
            color:red;
            background-color: pink;
            width: 50px;
            height: 50px;
            display: inline-block;
        }

        span::after{
            content:"永不止步";
            color:yellowgreen;
        }

        /*给原本的span标签设置一个默认的属性*/
        span{
            border: 1px solid #000;
        }
    </style>
</head>
<body>

<span>生命壹号</span>
</body>
</html>

效果如下:

上图可以看出

  • 通过伪元素选择器,就可以添加出类似于span标签的效果(记得要结合 content 属性使用)。

  • 通过这两个属性添加的伪元素,是行内元素,需要转换成块元素才能设置宽高。

2、格式:(第二部分)

  • E::first-letter 设置元素 E 里面的第一个字符的样式。

  • E::first-line 设置元素 E 里面的第一行的样式。

  • E::selection 设置元素 E 里面被鼠标选中的区域的样式(一般设置颜色和背景色)。

E::first-letter 的举例:

E::first-line的举例:

最后来张表格:

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。