CSS3新增选择器

最新推荐文章于 2022-07-19 11:31:45 发布

皮卡丘与pig

最新推荐文章于 2022-07-19 11:31:45 发布

阅读量203

点赞数 2

本文链接：https://blog.csdn.net/weixin_52079958/article/details/119375536

版权

首先，CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素，共增加了三种：

属性选择器、结构伪类选择器、伪元素选择器，接下来我为大家分别介绍一下

一、属性选择器：

按照字面意思，都是根据标签中的属性来选择元素。共有五种：

1.E[att] 选择具有att属性的E元素

2.E[att="val"] 选择具有att属性且属性值等于val的E元素

3.E[att^="val"] 匹配具有att属性且值以val开头的E元素

4.E[att$="val"] 匹配具有att属性且值以val结尾的E元素

5.E[att*="val"] 匹配具有att属性且值中含有val的E元素

二、结构伪类选择器：

1. E:first-child 匹配父元素的第一个子元素E

<head>
    <style>
        /* 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }
    </style>
</head>
<body>
    <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>
    </ul>
</body>

2. E:last-child 匹配父元素中最后一个E元素

<head>
    <style>
        /* 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: red;
        }
    </style>
</head>
<body>
    <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>
    </ul>
</body>

3.E:nth-child(n) 匹配到父元素的第n个元素

<head>
    <style>
        /* 选择ul里面的第2个孩子 小li */
         ul li:nth-child(2) {
            background-color: skyblue;
        }
        /* 选择ul里面的第6个孩子 小li */
        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <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>
    </ul>
</body>

4.E:first-of-type 指定类型E的第一个

<head>
    <style>
        ul li:first-of-type {
            background-color: pink;
        }
    </style>
</head>
<body>
    <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>
    </ul>
</body>

5. E:last-of-type 指定类型E的最后一个

<head>
    <style>
        ul li:last-of-type {
            background-color: red;
        }
    </style>
</head>
<body>
    <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>
    </ul>
</body>

6. E:nth-of-type(n) 指定类型E的第n个

<head>
    <style>
        ul li:nth-of-type(even) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <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>
    </ul>
</body>

7.重点：E:nth-child 与 E:nth-of-type 的区别

E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

三、伪元素选择器:

1.::before 在元素内部的前面插入内容

2.::after 在元素内部的后面插入内容

注意：
before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素语法： element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为 1

<head>
     <style>
         div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            /* display: inline-block; */
            content: '我';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        }
        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>
<body>
    <div>是</div>
</body>