前面我们介绍了css的三种链接方式，选择器，部分属性以及开发中可以使用到的一些实例，在这篇博客中我将介绍更为详细的内容。

选择器补充

通配符选择器

通配符选择器是 CSS 中的一种选择器，用于匹配文档中的所有元素。

它的使用方法非常简单，只需要使用*符号当作选择器即可

*{ /*填写对应的样式*/ }

通配符选择器是 CSS 中的一种选择器，用于匹配文档中的所有元素。通配符选择器使用 * 符号表示。

我们去看一些网站样式的时候经常会看到这个代码:

*{ margin:0px; padding:0px; }

为什么这样写呢？

这段代码可以对整个页面中的所有元素重置默认样式，可以实统一的外观效果，以避免默认样式带来的布局问题。

下次大家写代码的时候也可以在css文件第一行写上这段代码

需要注意的是通配符选择器的优先级最低。这个后面会介绍，其实对整体来说没任何影响，除非你又重新写了选择器重复的样式，将其替代了。

后代选择器

后代选择器是一种CSS选择器，用于选择特定元素的后代元素。它通过使用空格来指定元素之间的层次关系。

简单来说 就是父亲在前，儿子在后。

小故事

有一个大div盒子，这个div类样式选择器是header 它有俩儿子，大儿子(离他最近的就叫大儿子)a标签，它叫做header-logo，它还有个小儿子，这个小儿子太小了，header还没想明白该取什么名字，索性，就先不管了。这时候header有一个大的大房子 它长度是300px宽也是300px，这时候两个儿子已经长大了，该给他们分房间了，那该怎么分呢，header征求儿子的意见，大儿子说：“我随意你想给多少就给我多少”,小儿子可不这么认为，毕竟这到以后可是自己生活的地方，所以张口就要100*100，header就给两个儿子分了这些房间，房间里面的样式需要儿子们自己设置，自己需要什么就设置成什么。大儿子要了红色，小儿子要了白色，小儿子还给自己的家加了一个1px围栏，这样他就能占更多的地方了。小儿子长大了，他也有一个孩子 这个孩子叫k，他也是一个div盒子，k长大了也要房子，那么无名的小儿子需要给k划分自己的私人空间。它给了k一个大小是50*50的屋子，按照k的需求，屋子以黑色布局。

回归主题:代码该如何写呢？

其实很简单:父类选择器 子类选择器就行，就像上面给大儿子分地方的时候一样父亲名字.header空格儿子名字.header-logo>>.header .header-logo{样式布局}

给孙子呢咋写呢：

我们要知道，我没给小儿子起名字（感觉小儿子太可怜了），那没办法，小儿子不可能不要，这时候header想到一个办法，把小儿子的本质写出来,小儿子是什么?  “div” 

这个写法非常重要，实际写代码的时候，往往需要很多选择器，我如果每写一个起一个名字，很不好记，并且在后来的代码中我还没办法看懂那是啥，所以用这种递进的可以很好的看懂他的上一级。

代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- 这里是css代码 -->
    <style>
        .header{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .header .header-logo{
            text-decoration: none;
            color:red;
        }
        .header div{
            border: 1px solid black;
            width: 100px;
            height: 100px;
            font-size: 20px;
            color: beige;
        }
        .header div .k{
            background-color: black;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="header">
        <a href="#" class="header-logo">logo</a>
        <div>
            小儿子
            <div class="k">
                k
            </div>
        </div>
    </div>
</body>
</html>

CSS详细学习-选择器_css

子选择器

大家想必都知道明太祖朱元璋吧，他对他的儿子朱标可谓是宠爱到极点了，因为自己幼年的悲惨遭遇，让他特别宠爱自己的后代，可惜造化弄人，朱标感染重病去世，朱元璋悲痛欲绝，他把对朱标的喜爱都给到了他的孙子朱允炆(朱标的儿子)，不顾大臣反对，立朱允炆为帝，要知道当时的朱允炆才十几岁，他的叔叔朱棣更是文武双全，战力惊人，放着优秀的儿子不用，反而传位给孙子，可见朱元璋对朱标有多喜爱。

转回来：

子选择器又叫做亲儿子选择器，顾名思义，就是有一个自己最喜爱的孩子，这个儿子的身份就是长子，也就是大儿子，离他最近的那类。和朱元璋不同的时，子选择器只喜欢自己的直系儿子，不喜欢他的孙子。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 > strong {color:red;}
    </style>
</head>

<body>
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>

</html>

CSS详细学习-选择器_学习_02

第一个里面span直接就属于是h1的亲儿子了，因为没有其他标签，最近的只有他，h1直接给它买了好看的衣服，第二个中间有个em，子选择器也不讲究什么隔代亲了，直接不给买衣服，只能穿着默认的样式服装。

并集选择器

并集选择器允许你同时选择多个不同类型的元素或相同类型的元素。并集选择器使用逗号分隔不同的选择器，它会选中满足任一选择器的元素，将它们作为一个整体进行样式的应用。这使得我们能够对多个元素应用相同的样式，而无需为每个元素编写单独的规则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.highlight, h2, a {
        color: blue;
        }

    </style>
</head>
<body>
    <p class="highlight">这是一个段落。</p>
    <h2>这是一个标题。</h2>
    <a href="#">这是一个链接。</a>

</body>
</html>

CSS详细学习-选择器_选择器_03

这个选择器就是对所有具有相对应的选择器写相同的样式。

伪类选择器

这个就比较有趣：百度 大家把鼠标悬浮到百度字体上面，是不是发现它颜色发生改变，移走鼠标后颜色恢复。

这里以链接伪类选择器讲解

a:link =>选择所有没有被访问过的链接，一般使用不多。

a:visited =>选择所有已访问的链接 常用于网站浏览过的网址颜色会变灰色

a:hover =>鼠标指针位于位置的链接

a:active =>鼠标电机的链接

演示1:

点击前

CSS详细学习-选择器_css_04

点击后

CSS详细学习-选择器_选择器_05

演示2:鼠标悬停

CSS详细学习-选择器_前端_06

演示三：点鼠标击

CSS详细学习-选择器_css_07

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: blue;
            /* 设置未访问链接的文本颜色为蓝色 */
            text-decoration: none;
            /* 移除未访问链接的下划线 */
        }

        a:visited {
            color: gray;
            /* 设置已访问链接的文本颜色为灰色 */
        }

        a:hover {
            color: red;
            /* 设置鼠标悬停链接的文本颜色为红色 */
            text-decoration: underline;
            /* 添加鼠标悬停链接的下划线效果 */
        }

        a:active {
            color: green;
            /* 设置点击链接时的文本颜色为绿色 */
        }
    </style>
</head>

<body>
    <a href="#">这是一个小小的链接</a>
</body>

</html>

结束：

以上就是我这次介绍的内容，内容不多，但是学会后在后期的css布局中可以更好写和读代码。下期将介绍盒子模型。

补充

2023/11/9

属性选择器

根据元素特定的属性来选择元素，这样可以不需要借助类或者id选择器

CSS详细学习-选择器_css_08

举例使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作直角三角形</title>
    <style>
        div[data-id] {
            width: 0;
            height: 0;
            border-bottom: 50px solid pink;
            border-left: 100px solid transparent;
        }
    </style>
</head>
<body>
    <div class="triangle" data-id="1"></div>
</body>
</html>

CSS详细学习-选择器_html_09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作直角三角形</title>
    <style>
        div[data-id='1'] {
            width: 0;
            height: 0;
            border-bottom: 50px solid pink;
            border-left: 100px solid transparent;
        }
        div[data-id='2']{
            width: 100px;
            height: 100px;
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="triangle" data-id="1"></div>
    <div data-id="2"></div>
</body>
</html>

CSS详细学习-选择器_html_10

使用的时候如果出现改样式不起作用或者是不是你期待的作用，你需要检查一下权重。

解构选择器

根据文档解构来进行选择，常常根据父元素在盒子中的位置进行使用

CSS详细学习-选择器_html_11

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作直角三角形</title>
    <style>
        ul li:first-child{
            color: pink;
        } 
        ul li:last-child{
            color:red;
        }
        ul li:nth-child(2){
            color:aqua
        }
        ul li:nth-child(3){
            color:blue
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

CSS详细学习-选择器_选择器_12

注意：其中nth:child(n) n可以是数字也可以是表达式，n+2这种。当然也可以选择偶数和奇数直接使用关键字，even是偶数 odd是奇数

介绍一些常见的表达式使用 

  • 2n 偶数
  • 2n+1 奇数
  • 5n 5 10 15...
  • n+5 从第五个开始，包干第五个
  • -n+5 前五个包含第五个

伪元素选择器

伪元素选择器是用来简化html解构

伪元素选择器是CSS中的一种选择器，它允许你选择元素的某些部分，这些部分在文档的源代码中并不存在。它们被称为“伪”元素，因为它们不是真正的HTML元素，而是通过CSS创建的。

"before"和"after"就是两种常见的伪元素选择器。

  1. "::before"：这个伪元素会在指定的元素的内容之前插入生成的内容。例如，你可以使用它来在一段文本之前添加一个图标或者图片。
  2. "::after"：这个伪元素会在指定的元素的内容之后插入生成的内容。例如，你可以使用它来在一段文本之后添加一个图标或者图片。

这两个伪元素都接受一些特定的CSS属性，如content、width、height、margin等，可以用来控制生成的内容的样式。

记住必须有content属性的写入且不为空否则该元素不会显示。

举例使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作直角三角形</title>
    <style>
        ul li:first-child{
            color: pink;
        } 
        ul li:last-child{
            color:red;
        }
        ul li:nth-child(2){
            color:aqua
        }
        ul li:nth-child(3){
            color:blue
        }
        ul li:last-child::after{
            position: absolute;
            content: " ";
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

CSS详细学习-选择器_选择器_13

对于他的位置调节使用子绝父相进行调整，定位在后面的博客有讲解。

结束

这篇博客详细介绍了css中的一些选择器，目的是帮助大家减少使用类样式和id样式，简化css代码的写法。