CSS3选择器

最新推荐文章于 2022-11-03 16:35:08 发布

流星雨^-^

最新推荐文章于 2022-11-03 16:35:08 发布

阅读量648

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qiutiandepaomo/article/details/121009704

版权

类选择器、属性选择器、伪类选择器权重都是10

一、属性选择器

选择符	简介
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>
        button {
            cursor: pointer;
        }
        /* 属性选择器使用方法 */
        /* 选择具有disabled属性的button标签 */
        button[disabled] {
            cursor: default;
        }
        /* 选择具有type属性且type属性值等于search的input标签 */
        input[type="search"] {
            color: pink;
        }
        /* 选择具有type属性且type属性值以icon开头的div标签 */
        div[class^="icon"] {
            color: red;
        }
        /* 选择具有type属性且type属性值以icon结尾的div标签 */
        div[class$="icon"] {
            color: skyblue;
        }
        /* 选择具有type属性且type属性值中包含icon的div标签 */
        div[class*="iicon"] {
            color: yellow;
        }
    </style>
</head>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button>按钮</button>

    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">

    <div class="iconred1">图标1</div>
    <div class="iconred2">图标2</div>
    <div class="iconred3">图标3</div>
    <div class="1skyblueicon">图标4</div>
    <div class="2skyblueicon">图标5</div>
    <div class="3skyblueicon">图标6</div>
    <div class="1iicon">1图标</div>
    <div class="2iicon">2图标</div>
    <div class="3iicon">3图标</div>
    <div class="iicona">图标a</div>
    <div class="iiconb">图标b</div>
    <div class="iiconc">图标c</div>

</body>

</html>

二、结构伪类选择器

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

<!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>
        /* 匹配父元素中第一个子元素 */
        ul li:first-child {
            background-color: aqua;
        }
        /* 匹配父元素中最后一个子元素 */
        ul li:last-child {
            background-color: chartreuse;
        }
        /* 匹配父元素中第n个子元素 */
        ul li:nth-child(8) {
            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>
        <li>9</li>
        <li>10</li>
    </ul>
</body>

</html>

1、nth-child(n) n可以是数字、关键字和公式。n如果是数字，就是选择第几个，常见的关键词有even偶数、odd奇数。常见的公式如下(如果n是公式，则从0开始计算)但是第0个元素或者超出了元素的个数会被忽略。

公式	取值
2n	偶数
2n+1	奇数
5n	5，10，15，...
n+5	从第5个开始(包含第五个)到最后
-n+5	前5个(包含第5个)

<!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>
        /* n是关键词 even是偶数 odd是奇数 */
        /* ul li:nth-child(even) {
            background-color: blueviolet;
        }
        ul li:nth-child(odd) {
            background-color: aqua;
        } */

        /* n是公式 */
        /* 偶数 */
        /* ul li:nth-child(2n) {
            background-color: pink;
        } */
        /* 奇数 */
        /* ul li:nth-child(2n+1) {
            background-color: red;
        } */
        /* ul li:nth-child(n+5) {
            background-color: red;
        } */
        /* ul li:nth-child(5n) {
            background-color: red;
        } */
        ul li:nth-child(-n+5) {
            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>
        <li>9</li>
        <li>10</li>
    </ul>
</body>

</html>

注意：nth-child只会选择父元素里面的第n个child，不管里面的child是否是同一元素类型。

<!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>
        div :nth-child(1) {
            background-color: pink;
        }
        
        div :nth-child(2) {
            background-color: purple;
        }
        /* 这样筛选出来的是第一个child并且第一个child是span的标签 */
        div span:nth-child(1){
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <div>
            <p>我是一个p标签</p>
            <span>我是一个span标签</span>
            <span>我是一个span标签</span>
            <span>我是一个span标签</span>
        </div>
    </ul>
</body>

</html>

2、of-type

<!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>
        /* of-type 选择指定类型的元素 */
        div span:first-of-type {
            background-color: aquamarine;
        }
        
        div span:last-of-type {
            background-color: red;
        }
        
        div span:nth-of-type(2) {
            background-color: greenyellow;
        }
    </style>
</head>

<body>
        <div>
            <p>我是一个p标签</p>
            <span>我是一个span标签</span>
            <span>我是一个span标签</span>
            <span>我是一个span标签</span>
        </div>
</body>

</html>

三、伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

需要注意的点：

befor和after必须有content属性
before在内容的前面，after在内容的后面
befor和after创建一个元素，但是属于行内元素
因为在dom里面看不见创建的元素，所以我们称之为伪元素
伪元素和标签选择器一样，权重为1

<!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>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        
        div::before {
            content: "我";
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        div::after {
            content: "女生";
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        是
    </div>
</body>

</html>

流星雨^-^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器

类选择器、属性选择器、伪类选择器权重都是10一、属性选择器选择符简介 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
复制链接

扫一扫