浅谈CSS中的几种选择器

喜欢ヅ旅行 2022-06-05 07:45 201阅读 0赞

**浅谈CSS中的几种选择器**

在学习前端的过程中，相信大家也对选择器有所了解了，选择器也就是CSS用来给HTML里面的文本来设置样式的，是进行网页布局的基础，这些选择器的合理应用，将有效提高你的开发效率和编码水平。下面我就来简单的介绍几种选择器。

一、标签选择器：

顾名思义，标签选择器就是所有带某种标签的样式都会生效，范围比较广泛，下面我们用一段代码来加深理解吧：

html {
         margin: 0;
        padding: 0;
        border: 0;
        font - size: 100 % ;
        vertical-align: baseline;
    }

比如上面一段代码，这段代码的标签就是html，所以意思就是所有html标签包含的html文本都被设置了这个样式。

二、类选择器（.class）：

类选择器可以单独使用，也可以与其他元素结合使用，可能这样讲有点难懂，那么我同样用两段代码来辅助的解释一下：

代码段一：

.pc-album {
        width: 100%;
        min-height: 270px;
        max-width: 752px;
        overflow: hidden
    }

代码段二：

.pc-album .pc-album-main {
        position: relative;
        width: 100%;
        height: 270px;
        border-radius: 4px;
        transition: background-image .2s
    }

从代码段一中，我们可以看出，只要有class="pc-album"时，样式就得以实现，但是代码段二中又出现了一个pc-album-main，这就说明只有在同时有这两个类时，样式才得以实现。  
三、ID选择器（\#id）：

在某些方面，id选择器类似于类选择器，不过也有一些重要的差别。首先，最明显的一个差别我们从小标题上就可以看到id选择器前面是一个“\#”，而类的前面是“.”，其次，最重要的一个区别是id选择器在一个文档里面只能用一次。最后一个区别就是id选择器不能与其他元素结合使用。还有一个需要注意的是类选择器与id选择器的共同点是都区分大小写。由于id选择器与类选择器的用法基本相同，我这里就不再用代码做例子了，如果不明白的可以参考类选择器里的代码段一。

四、派生选择器：

派生选择器的作用是依据元素在其位置的上下文关系来定义样式，这样可以使标记更加简洁。下面我们依然用代码来加深理解：

CSS代码：

li strong {
        font-style: italic;
        font-weight: normal;
      }

html代码：

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用
 
 <ol>
 <li>我是斜体字。这是因为 strong 元素位于 li 元素内。</li>
 <li>我是正常的字体。</li>
 </ol>

从CSS代码中我们可以看出两个标签的上下文关系，显然li标签是包含着strong标签的，在html代码中有两个标签包含着strong标签，那到底是哪个标签的样式得以实现呢？我们从CSS里面不难看出因为是li而不是p标签，所以得以实现的文本当然就是下面一个strong标签的文本了。  
五、通配符选择器（\*）

看到通配符选择器的标志我们就知道这个标志代表所有的，说明这个选择器的范围比我们的标签选择器还大，在我们写java代码是导入一个包下所有的类就用了这个符号

，在CSS中同样使用“\*”来代表所有的标签和元素。同样以代码为例：

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

这段代码的意思就是该html文档里的所有文本都赋予了这个样式，但是通常情况来讲我们要避免使用该选择器，因为通配符选择器是设置界面上所有的标签属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差。

目前我知道的几个选择器就是这些。最后，我来总结一下什么时候用哪种选择器。用不同选择器的原则是：

第一：准确的选到要控制的标签；

第二：使用最合理优先级的选择器；

第三：html和CSS代码尽量简洁美观。

通常，最常用的选择器是类选择器；如果考虑到代码的简洁性的话推荐使用派生选择器；极少的情况下会使用id选择器，因为id选择器只能在一个文档里面出现一次，而且相同的样式在一个页面里不可能有多次。

以上就是我对我目前知道的几个选择器做的归纳，如果有什么需要补充的地方欢迎评论补充！！！