CSS3新增选择器示例-伪类选择器

一. 伪类选择器介绍

1.1 首先了解下什么是类选择器

类选择器语法:.类名

也就是标签的class属性值

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>css3中选择器示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*通过标签选择器给div设置宽、高,文字对其方式*/
        div {
            width: 300px;
            height:200px;
            text-align: center;
            color: white;
            line-height: 200px;
            margin-top: 10px;
        }

        /*② 通过类选择器给两个div设置样式*/
        .div1 {
            background-color: black;
        }

        .div2 {
            background-color: red;
        }
    </style>
</head>
<body>
    <!--① 首先,定义两个div标签,并设置class属性,值分别是div1和div2-->
    <div class="div1">我是div1标签</div>
    <div class="div2">我是div2标签</div>
</body>
</html>

运行结果
这里写图片描述

1.2 伪类选择器

① 上面简单的介绍了类选择器,那么伪类选择器与类选择器之间,有什么关系呢?

  答:没什么关系。

② 为什么说没关系呢?

  首先,类选择器的语法是.类名, 类名是用户自定义的,类选择器定义的样式,

  我们在标签的class属性中可以直接通过定义的类名直接使用。

  伪类选择器的语法是固定的,例如:E:hover (E代表选择器,可以是类选择器,标签选择器)

二. CSS3中新增的伪类选择器示例介绍

1. E:first-child

获取某元素(E)的父元素的第一个子元素

例1:

<!DOCTYPE html>
<html>
<head>
    <title>示例代码1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*② 通过li标签获取该元素的父元素下的第一个子元素,将该元素的内容的文字颜色,设置为红色*/
        li:first-child {
            color: red;
        }
    </style>
</head>
<body>
    <!--① 定义一个无序列表-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

运行结果
这里写图片描述

例2:

<!DOCTYPE html>
<html>
<head>
    <title>示例代码2- 通过类选择器获取</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*② 通过类名选择器找到指定元素,获取该指定元素的父元素下的第一个子元素,将该元素的内容的文字颜色,设置为红色*/
        .li1:first-child {
            color: red;
        }
    </style>
</head>
<body>
    <!--① 定义一个无序列表-->
    <ul>
        <li>1</li>
        <li class="li1">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

运行结果
这里写图片描述

示例代码2失败原因

要设置的第一个子元素,没有没有设置class=’li1’

如果是指定标签选择器,那么指定的标签也应该是与标签选择器的标签名相同

这里写图片描述

例3

<!DOCTYPE html>
<html>
<head>
    <title>示例代码3- 通过类选择器获取</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*找到h2标签的父标签div下的第一个元素*/
        h2:first-child {
            color: red;
        }
    </style>
</head>
<body>

    <div>
        <p>第一段文字</p>
        <p>第二段文字</p>
        <p>第三段文字</p>
        <p>第四段文字</p>
        <h2>第五段文字</h2>
    </div>
</body>
</html>

运行结果
这里写图片描述

失败原因

例3中,我们是通过h2标签找到的父标签下的第一个元素。
① 如果是通过标签选择器查找,那么指定的标签要与查找的标签,标签名要相同
② 如果是类选择器,那么指定的要与查找的要有相同的类名

改正后运行结果
这里写图片描述


2. E:last-child

获取最后一个子元素,与E:first-child用法相同。


3. E:nth-child(n) 用法

获取第 n 个子元素

例1

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*找到ul标签下的li标签的父元素下的第七个子元素(有点绕口)*/
        ul>li:nth-child(4) {
            color: red;
        }
    </style>
</head>
<body>

<ul>
    <li>第一个子元素</li>
    <li>第二个子元素</li>
    <li>第三个子元素</li>
    <li>第四个子元素</li>
    <li>第五个子元素</li>
    <li>第六个子元素</li>
    <li>第七个子元素</li>
    <li>第八个子元素</li>
</ul>

</body>
</html>

这里写图片描述

例2:

如果是n 值为 小于 1 或 超出指定元素的兄弟元素个数,会出现什么状况?

这里写图片描述

这里写图片描述

例3:

这里写图片描述

总结:

从上面三个例子可以看出

① n 是从 1 开始计算的,小于 1 或 大于兄弟元素个数,都不会生效

② E 与 选中的第 n 个元素,如果 E 是 标签,那么 n 所指向的元素要与 E 是相同的标签


4. E:nth-child(an + b) 用法

nth-child(2n - 1) 与 nth-child(n) 中 n 所表示的意义不同

nth-child(n) 中的 n 表示的是 第几个元素,值从 1 开始

nth-child(an + b) 中的 n 代表 从 0 开始,依次递增的自然数
0, 1, 2, 3, 4….

通过下面的例子来具体说明

例1

给无序列表下的奇数个子元素的字体颜色设置为红色

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>将无序列表的所有偶数为子元素字体颜色设置为红色</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        li:nth-child(2n - 1) {
            color: red;
        }
    </style>
</head>
<body>

<ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
    <li>第四个元素</li>
    <li>第五个元素</li>
    <li>第六个元素</li>
    <li>第七个元素</li>
    <li>第八个元素</li>
</ul>

</body>
</html>

运行结果

这里写图片描述

总结:

上例的nth-child(2n -1)
可以理解成一个for循环
for(var n = 0; ; n++) {
    var w = 2n - 1;
    if(w > 8) { // 8 就是li的个数
    break;
    }else {
    nth-child(w);
    }
}

注意: 当a的值为正整数是,2n - 1 的最大值不能超过li的个数也就是 8

第一次: n = 0  2n-1=-1 小于8成立 执行nth-child(-1) -1 < 1 运行无效果
第二次: n = 1  2n-1= 1 小于8成立 执行nth-child(1) 将第一个元素文字颜色设置为红色
....
第六次: n = 5  2n-1= 9 大于8 停止循环

此时,页面上颜色改变的就只有第1,3,5,7个元素

例2

给无序列表前五个元素的文本颜色设置为红色

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>给无序列表的前五个元素文本颜色设置为红色</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*
            a = -2 为负数,取开最小值, an + b 的最小值不能小于 1
            第一次: n = 0  -1*0 + 5 = 5  5 > 1 执行nth-child(5)
            第二次:  n = 1  -1*1 + 5 = 4  4 > 1 执行nth-child(4)
            第三次: n = 2  -1*2 + 5 = 3  3 > 1 执行nth-child(3)
            第四次: n = 3  -1*3 + 5 = 2  2 > 1 执行nth-child(2)
            第四次: n = 4  -1*4 + 5 = 1  1 = 1 执行nth-child(1)
            第四次: n = 5  -1*4 + 5 = 0  0 < 1 结束,停止执行
        */
        li:nth-child(-1n + 5) {
            color: red;
        }
    </style>
</head>
<body>

<ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
    <li>第四个元素</li>
    <li>第五个元素</li>
    <li>第六个元素</li>
    <li>第七个元素</li>
    <li>第八个元素</li>
</ul>

</body>
</html>

运行结果

这里写图片描述

注意:nth-child(an + b) 的写法是固定的,顺序不能颠倒,如写成如下情况

这里写图片描述

以上三例总结

① nth-child(an + b) 的写法是固定的,不能颠倒,写成nth-child(b + an)无效

② 当a 为正数时,an + b 的最大值为所有子元素的个数,超过该值n 就停止递增

③ 当a 为负数时, an + b 的最大值,不能小于 1, 小于1 ,n 停止递增


5. E:nth-child(even)

选中所有的偶数元素
这里写图片描述


6.nth-child(odd)

选中所有的奇数元素
这里写图片描述

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值