XM的小窝


 

【CSS3】 属性选择器与结构伪类选择器

属性选择器

属性选择器可以根据元素特定的属性来选择元素,这样就可以不用借助于类或者id选择器了

选择符 简介
E[att] 选择具有 att 属性的 E 元素
E[att="val"] 选择具有 att 属性且属性值等于 val 的 E 元素
E[att^="val"] 匹配具有 att 属性且以 val 开头的 E 元素
E[att$="val"] 匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*="val"] 匹配具有 att 属性且值中含有 val 的 E 元素

例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 300px;
        }

        img[alt^="1"] {
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <img src="https://gravatar.loli.net/avatar/caa50e6e1d3538931cdbe4bf306f6c30" alt="12">
    <img src="https://gravatar.loli.net/avatar/caa50e6e1d3538931cdbe4bf306f6c30" alt="123">
    <img src="https://gravatar.loli.net/avatar/caa50e6e1d3538931cdbe4bf306f6c30" alt="1234">
    <img src="https://gravatar.loli.net/avatar/caa50e6e1d3538931cdbe4bf306f6c30" alt="666">
</body>

</html>

效果:

结构伪类选择器

结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁

选择符 简介
E:first-child 匹配父元素中的第一个子元素 E
E:last-child 匹配父元素中最后一个 E 元素
E:nth-child() 匹配父元素中的第 n 个子元素 E
E:first-of-type 指定类型 E 中的第一个
E:last-of-type 指定类型 E 中的最后一个
E:nth-of-type() 指定类型 E 的第 n 个

nth-child(n) 的使用方法:

  1. n可以是数字,关键字和公式
  2. n如果是数字,就是选择第n个子元素,里面数字从1开始
  3. n可以是关键字,even偶数,odd 奇数
  4. n可以是公式:常见的公式如下
公式 取值
2n 偶数
2n+1 奇数
5n 5 10 15 ....
n+5 从5开始的数,递增
-n+5 从5开始的数,递减到0

nth-child 和 nth-of-type 的区别

· nth0-child 对父元素里面所有子代元素进行排序选择(序号固定)先找到第n个子元素,然后检查是否和E匹配
· nth-of-type 对父元素里面指定子元素进行排序选择,先去匹配E,然后在根据E寻找第n个子元素。

点赞
  1. Kw==说道:
    Firefox Android 11

    虽然但是,首页开屏见这文章的头图是我一朋友现在的头像就很奇妙) :鹿乃_OK:
    算了,继续看文章去了

发表评论

电子邮件地址不会被公开。必填项已用 * 标注