1.(css3)掌握新增选择器全攻略

最新推荐文章于 2023-06-30 17:24:14 发布

溜_x_i_a_o_迪

最新推荐文章于 2023-06-30 17:24:14 发布

阅读量201

点赞数

分类专栏： # CSS 0基础快速入门 CSS学习手册文章标签： css3 属性选择器介绍结构伪类 nth-child 伪元素 nt-ofh-type 区别现状小结案例属性列表 css html

本文链接：https://blog.csdn.net/u013946061/article/details/112462572

版权

CSS学习手册同时被 2 个专栏收录

19 篇文章 3 订阅

订阅专栏

CSS 0基础快速入门

16 篇文章 1 订阅

订阅专栏

1. 重点提炼

CSS3 新增的属性、结构伪类和伪元素选择器
CSS3结构选择器
CSS3结构伪类选择器
CSS3伪元素

2. `CSS3` 介绍

浏览器支持程度差，需要添加私有前缀
移动端支持优于PC端
不断改进中
应用相对广泛

2.1 什么是 `CSS3`

在 CSS2 的基础上拓展、新增的样式

2.2 `CSS3` 发展现状

移动端支持优于 PC 端
CSS3 目前还草案，在不断改进中
CSS3 相对 H5，应用非常广泛

3. `CSS3` 属性选择器

选择符	简介
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元素

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

3.1 代码演示

button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}
input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

3.2 example01

3.2.1 example01-1

按钮点击样式为小手，设置按钮禁用状态

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        button {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- disabled 是禁用我们的按钮 -->
    <button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button disabled="disabled">按钮</button>
</body>

</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.16
Branch： branch04
commit description：a2.16（example01-1——设置按钮点击样式和禁用状态）

tag：a2.16

3.2.2 example01-2

禁用按钮，样式不可为小手，而是默认小白箭头。

以前我们是定义class名来解决，现在可以用属性选择器来解决了。

        button[disabled] {
            cursor: default;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.17
Branch： branch04
commit description：a2.17（example01-2——禁用按钮，样式不可为小手，而是默认小白箭头）

tag：a2.17

3.2.2.1 小结

以上属性选择器使用方法 => 括号里直接写属性

选择的是：既是button又有disabled 这个属性的元素

上面button标签选择器的权重是1，属性选择器的权重是10，这里是11（标签+属性选择器）

3.2.3 example01-3

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        button {
            cursor: pointer;
        }
        button[disabled] {
            cursor: default;
        }
    </style>
</head>

<body>
    <!-- disabled 是禁用我们的按钮 -->
    <button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button disabled="disabled">按钮</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="搜索框">
</body>

</html>

想把搜索框文字变粉色

根据属性值的不同选择对应的元素

        input[type="search"] {
            color: pink;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.18
Branch： branch04
commit description：a2.18（example01-3——根据属性值的不同选择对应的元素）

tag：a2.18

3.2.4 example01-4

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        button {
            cursor: pointer;
        }
        button[disabled] {
            cursor: default;
        }
        input[type="search"] {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- disabled 是禁用我们的按钮 -->
    <button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button disabled="disabled">按钮</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="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>
</body>

</html>

想将icon开头的标签字体全部变为红色。

        div[class^="icon"] {
            color: red;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.19
Branch： branch04
commit description：a2.19（example01-4——使用以某个值开头的属性值元素样式）

tag：a2.19

3.2.5 example01-5

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        button {
            cursor: pointer;
        }
        button[disabled] {
            cursor: default;
        }
        input[type="search"] {
            color: pink;
        }
        div[class^="icon"] {
            color: red;
        }
    </style>
</head>

<body>
    <!-- disabled 是禁用我们的按钮 -->
    <button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button disabled="disabled">按钮</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="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>
    <div class="iicon3">图标4</div>
    <div class="absicon">图标5</div>
</body>

</html>

设置以icon结尾的属性选择器的元素样式

        div[class$="icon"] {
            color: green;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.20
Branch： branch04
commit description：a2.20（example01-5——设置以icon结尾的属性选择器的元素样式）

tag：a2.20

3.2.6 example01-6

可以在任意位置的，如包含"icon"的属性值。

        div[class*="icon"] {
            color: blue;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.21
Branch： branch04
commit description：a2.21（example01-6——可以在任意位置的，如包含"icon"的属性值。）

tag：a2.21

4. 结构伪类选择器

4.1 属性列表

选择符	简介
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个

注意：类选择器、属性选择器、伪类选择器，权重为 10

4.2 代码演示

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

4.3 example02

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
<!--    ul>li{$}*10-->
    <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>

设置第一个li背景颜色为粉色

        ul li:first-child {
            background-color: pink;
        }

再尝试修改最后一个元素

        ul li:last-child {
            background-color: deeppink;
        }

nth-child(n) 我们要第几个，n就是几比如我们选第8个，我们直接写 8就可以了

        ul li:nth-child(8) {
            background-color: lightpink;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.22
Branch： branch04
commit description：a2.22（example02——结构伪类选择器）

tag：a2.22

5. `nth-child`

5.1 nth-child 参数详解

注意：本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字，就是选中第几个
常见的关键字有 even 偶数、odd 奇数
常见的公式如下(如果 n 是公式，则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 …
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第5个）…

5.2 代码演示

<style>
  /* 偶数 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇数 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，从 0 开始计算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶数 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是从第5个开始往后选择 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五个 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

5.3 example03

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </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>

设置li中的偶数序列背景色粉色。

        ul li:nth-child(even) {
            background-color: pink;
        }

设置奇偶数行的颜色

        ul li:nth-child(even) {
            background-color: pink;
        }
        
        ul li:nth-child(odd) {
            background-color: hotpink;
        }

=> 参数可是关键词 even 是偶数 odd 是奇数

=> 应用：隔行变色

=> 公式

n是公式但是 n 从0开始计算

        ul li:nth-child(n) {
            background-color: pink;
        }

2n偶数类似于even

 ul li:nth-child(2n) {
    background-color: pink;
}

2n + 1类似于 odd

        ul li:nth-child(2n+1) {
            background-color: skyblue;
        }

5n选择第 0 5 10 15 ...

ul li:nth-child(5n) {
    background-color: pink;
}

应用 => 第五个盒子、第十个盒子特例，其余盒子都有右边距，就可以很方便利用伪类选择去令第五个盒子、第十个盒子的右边距为0，而以前我们都是加class覆盖样式来解决。

n+5 就是从第5个开始往后面选择包含第5个

	   ul li:nth-child(n+5) {
            background-color: pink;
        }

与上刚好相反，从第5个往前选择包含第5个

        ul li:nth-child(-n+5) {
           background-color: pink;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.23
Branch： branch04
commit description：a2.23（example03——nth-child的使用）

tag：a2.23

5.4 结构伪类选择器小结

结构伪类选择器就是选择第n个
Nth-child从所有子级开始算的，可能不是同一种类型
Nth-of-type 是指定同一种类型的子级，比如 ul li:nth-of-type(2) 是选择第2个li
关于nth-child（n）我们要知道n从0开始计算的，要记住常用的公式
如果是无无序列表，我们肯定用 nth-child 更多

6. `nth-child` 和 `nth-of-type` 的区别

6.1 代码演示

<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

6.2 区别

nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nt-of-type 选择指定类型的元素

6.3 example04

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       div :nth-child(1) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        <p>我是p</p>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
    </div>
</body>

</html>

       div :nth-child(2) {
          background-color: purple;
       }

综上很明显发现，nth-child(n)与类型无关，只跟第几个孩子有关。

        div span:nth-child(1) {  
            background-color: pink;
        }

什么也没有，其实这里是div第一个孩子，并且必须是span的元素。

    <div>
        <span>我是span</span>
        <p>我是p</p>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
    </div>

这样就找着了。特别注意这种错误写法。

又或者选第二个孩子同时是span

        div span:nth-child(2) {
            background-color: pink;
        }

note： :nth-child(n) 选择父元素里面的第 n个孩子，它不管里面的孩子是否同一种类型

of-type选择指定类型的元素 => 针对孩子不同类型的情况使用更好

选中div下的第一个类型为span的元素

        div span:first-of-type {
            background-color: purple;
        }

选中div下span的最后一个元素

        div span:last-of-type {
            background-color: skyblue;
        }

选中中间的span

        div span:nth-of-type(2) {
            background-color: red;
        }

注意：ul 里面我们只允许放li，所以 nth-child 和 nth-of-type就一样了，这个时候建议用nth-child。

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.24
Branch： branch04
commit description：a2.24（example04——nth-child 和 nt-of-type 的区别）

tag：a2.24

7. 伪元素选择器

7.1 参数

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

7.2 example05

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

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

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

</html>

注意：伪类选择器是一个冒号，而伪元素选择器是两个冒号。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        
        div::before {
            content: "我";
        }
    </style>
</head>

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

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        
        div::before {
            content: "我";
        }
        
        div::after {
            content: "溜_x_i_a_o_迪";
        }
    </style>
</head>

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

</html>

原理其实就是 =>

是在大盒子中央，左侧是before，右侧是after，包在盒子里面。

        div::before {
            content: "我";
            width: 100px;
            height: 100px;
            background-color: pink;
        }

before创建的元素是行内元素，没有大小

=> display: block;

        div::before {
            content: "我";
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        div::after {
            content: "溜_x_i_a_o_迪";
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

再转成行内块看看

        div::before {
            content: "我";
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        div::after {
            content: "溜_x_i_a_o_迪";
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.25
Branch： branch04
commit description：a2.25（example05——CSS3伪元素选择器的使用）

tag：a2.25

7.3 伪类选择器注意事项

before 和 after 必须有 content 属性
before 在内容前面，after在内容后面
before 和 after 创建的是一个元素（盒子），但是属于行内元素（没有宽度大小，经常需要转换）
创建出来的元素在 Dom 中查找不到，所以称为伪元素（如上例）
伪元素和标签选择器一样，权重为1（如上例div::before => 权重为2）

7.4 代码演示

<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

8. 伪元素的案例

添加字体图标

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 249px;
            height: 35px;
            border: 1px solid red;
        }
    </style>
</head>

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

</html>

复制

截取样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cv013x');
            src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        div {
            width: 249px;
            height: 35px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
    </div>
</body>

</html>

还需要补充字体样式

        span {
            font-family: 'icomoon';
        }

利用定位把三角放在右边 => 子绝父相

        span {
            font-family: 'icomoon';
            position: absolute;
            top: 10px;
            right: 10px;
        }
        
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid red;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.26
Branch： branch04
commit description：a2.26（伪元素案例——基本实现）

tag：a2.26

可以不用这么麻烦，利用伪元素即可

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cv013x');
            src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        span {
            font-family: 'icomoon';
            position: absolute;
            top: 10px;
            right: 10px;
        }
        
        div,
        p{
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid red;
        }
        
        p::after {
            content: '';
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
        }

    </style>
</head>

<body>
    <div>
        <span></span>
    </div>

 	<p></p>
</body>

</html>

也可以复制它

        p::after {
            content: '\ea50';
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.27
Branch： branch04
commit description：a2.27（伪元素案例——优化用伪元素实现）

tag：a2.27

（后续待补充）

溜_x_i_a_o_迪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.(css3)掌握新增选择器全攻略

文章目录1. 重点提炼2. `CSS3` 介绍2.1 什么是 `CSS3`2.2 `CSS3` 发展现状3. `CSS3 ` 属性选择器3.1 代码演示3.2 example013.2.1 example01-13.2.2 example01-23.2.2.1 小结3.2.3 example01-33.2.4 example01-43.2.5 example01-53.2.6 example01-64. 结构伪类选择器4.1 属性列表4.2 代码演示4.3 example025. `nth-child`5.
复制链接

扫一扫