CSS3新增选择器

最新推荐文章于 2024-08-26 13:43:55 发布

lskaixin

最新推荐文章于 2024-08-26 13:43:55 发布

阅读量241

点赞数 4

本文链接：https://blog.csdn.net/ls08250907/article/details/119148999

版权

CSS3新增选择器

每个学习使用CSS的人都是从基本选择器开始的，自然而然就运用自如了。如今，使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

前言

CSS选择器大致可分为三类：基本选择器、属性选择器和伪类选择器。大家都知道，选择器主要是用来确定html的树形结构中的DOM元素节点。每个学习使用CSS的人都是从基本选择器开始的，自然而然就运用自如了。如今，使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。下面就让我们来学习一下CSS3中主要增加的三种选择器。

1.属性选择器

2.结构伪类选择器

3.伪元素选择器

一、属性选择器

类选择器、属性选择器、伪类选择器权重为10

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[att] 选择具有att属性的E元素

   <style>
        input[value] {
            color: pink;
        }
    </style>
</head>

<body>
    <input type="text" value="请输入用户名">
    <input type="text">
</body>

2. E[att="val"] 选择器具有att属性且属性值等于val的E元素 (type="text" 引号可写，也可不写)

    <style>
        input[type="text"] {
            color: pink;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="password">
</body>

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

    <style>
        div[class^=ico] {
            color: red;
        }
    </style>
</head>

<body>
    <div class="ico-icon1">小图标1</div>
    <div class="ico-icon2">小图标2</div>
    <div class="ico-icon3">小图标3</div>
    <div class="lico-icon4">小图标4</div>
</body>

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

    <style>
        section[class$=data] {
            color: red;
        }
    </style>
</head>

<body>
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">我是奥特曼</section>
</body>

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

  <style>
        section[class*=of] {
            background-color: pink;
        }
    </style>
</head>

<body>
    <section class="icon1-of-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-of-ico">我是奥特曼</section>
</body>

二、结构伪类选择器

1. E:first-child	匹配父元素中的第一个子元素E
2. E:last-child	匹配父元素中的最后一个E元素
3. E:nth-child(n)	匹配父元素中的第n个子元素E
4. E:first-of-type	指定类型E的第一个
5. E:last-of-type	指定类型E的最后一个
6. E:nth-of-type(n)	指定类型E的第n个

1. E:first-child 匹配父元素中的第一个子元素E、E:first-of-type指定类型E的第一个

    <style>
        ul li:first-child {
            background-color: pink;
        }
          <!--
        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>

2. E:last-child 匹配父元素中的最后一个E元素、E:last-of-type指定类型E的最后一个

   <style>
        ul li:last-child {
            background-color: pink;
        }
          <!--
        ul li:last-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>

3. E:nth-child(n) 匹配父元素中的第n个子元素E 、 E:nth-of-type(n)指定类型E的第n个

n可以是数字、关键字、公式

n如果是数字，就是选择第n个子元素，里面数字从1开始

2n 偶数、2n+1 奇数、 even偶数、odd奇数、5n 5 10 15...、-n+5 前5个（包含第5个）

  <style>
        ul li:nth-child(2n+1) {
            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>

4. E:nth-of-type(n)与E:nth-child(n)的区别：

E:nth-child(n)会把所有的盒子排列、执行的时候先看nth-child() 之后再看前面的元素

E:nth-of-type(n)会把指定元素的盒子排列、执行的时候先看前面的元素之后再看nth-of-type()

 <style>
        section div:nth-child(1) {
            background-color: red;
        }
    </style>
</head>

<body>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

  <style>
        section div:nth-of-type(1) {
            background-color: red;
        }
    </style>
</head>

<body>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>