CSS详细学习-选择器

前面我们介绍了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”  ,所以你完全可以写成>>.header div .k{}

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

代码：

    
    
    
    
    


    

        logo
        

            小儿子
            

                k
            
        
    

---

子选择器

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

转回来：

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

    
    
    
    



    
This is very very important.
    
This is really very important.

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

并集选择器

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

    
    
    
    


    
这是一个段落。
    
这是一个标题。
    这是一个链接。

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

---

伪类选择器

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

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

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

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

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

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

演示1:

点击前

点击后

演示2:鼠标悬停

演示三：点鼠标击

    
    
    
    



    这是一个小小的链接

---

结束：

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

补充

2023/11/9

属性选择器

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

举例使用

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

解构选择器

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

使用

    
    
    
    


    

        
1
        
2
        
3
        
4
    

注意：其中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属性的写入且不为空否则该元素不会显示。

举例使用

    
    
    
    


    

        
1
        
2
        
3
        
4
    

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

结束

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