css选择器基础知识

最新推荐文章于 2024-09-20 02:44:07 发布

北柠陌语

最新推荐文章于 2024-09-20 02:44:07 发布

阅读量307

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html 文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/SSSS__AS/article/details/125414959

html 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了CSS选择器的基础知识，包括选择器的书写位置、常用选择器（元素选择器、ID选择器、类选择器、通配选择器）、复合选择器、关系选择器、属性选择器、伪类和伪元素选择器、继承以及选择器的权重。通过这些内容，读者可以更好地理解和掌握CSS如何定位和设置网页元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.css选择器简介

css -层叠样式表网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式，而最终我们能看到的只有最上边的一层，css就是宝珠我们设置网页中元素的样式。

网页分为结构，表现，行为三部分

2.css选择器的书写位置

1.第一种方式：内联样式/行内样式（不推荐使用）

写在开始标签里，写一个style属性，在style属性值里面写样式

样式分为样式名:样式值; 名值对的结构

可以写多组样式，以;隔开即可

缺点：结构和样式耦合；不容易修改。

 <span style="color: yellow; background-color: green; font-size: 40px">内联样式/行内样式</span>

2.内部样式表

在head标签中，写一个style标签，在style里先选中对应的元素，然后设置样式可以多组样式，以;隔开即可,最后一个样式，可以不写;，但我们一般都写。

缺点：不方便重复使用，不利于其他文件使用

<head>
<style>
      p{
        color: red;font-size: 40px；
      }
    </style>
</head>

3. 外部样式表（最推荐使用）

在html文件外新建一个css文件，在css文件内书写样式，然后通过link标签引入css文件。（引用文件的具体方式可以看之前发的博客）

<head>
 <link rel="stylesheet" href="./index.css" /> 
<!--./后面接的是你文件所在的位置 -->
  </head>

4.常用选择器

1、元素选择器

作用：选中对应的标签

语法：标签名{}

例如：h1{},h3{},p{}

2、id选择器

作用：选中对应的id属性值的内容,id属性值不能复用

语法：#id属性值{}

3、class选择器

作用：选中对应的class属性值的内容，可以复用属性值

语法：.class属性值{}

4、通配选择器

语法：*{}

5.复合选择器

1、交集选择器

作用：选中符合多个选择器条件的内容

语法：选择器1选择器2选择器3···{}

例如：div.red{},#div2.red{}

注意：如果选择器中有元素选择器，必须把元素选择器放在前面

2、并集选择器

作用：同时选中符合多个选择器对应的内容

语法：选择器1,选择器2,选择器3····{}

例如：.red,#p2,h1{}

6.关系选择器

元素之间的关系

父元素直接包含子元素的元素

子元素直接被父元素包含的元素

祖先元素直接或间接包含元素的元素包括父元素

后代元素直接或间接被包含元素的元素包括子元素

兄弟关系拥有共同的父元素的元素

1、子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

2、后代选择器

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素后代元素{}

3、选择下一个兄弟选择器

作用：通过指定的元素找到下一个兄弟元素

语法：兄+弟{}

4、选择下面所有的兄弟(前面的不选)

语法：兄～弟{}

7.属性选择器

语法：[属性名]{} 选择含有指定属性的元素

[属性名=属性值]{} 选择含有指定属性和属性值的元素

[属性名^=属性值]{} 选择属性值以指定值开头的元素

[属性名$=属性值]{} 选择属性值以指定值结尾的元素

[属性名*=属性值]{} 选择属性值含有某值的元素

8.伪类选择器

一、伪类（不存在的类，特殊的类）

-伪类用来描述一个元素的特殊状态

-比如：第一个元素，被点击的元素，鼠标移入的元素···

-特点：一般请情况下，使用：开头

1、 :first-child 第一个子元素

2、 :last-child 最后一个子元素

3、 :nth-child() 选中第n个子元素

特殊值： n 所有的

2n或even 选中偶数

2n+1或odd 选中奇数

—以上这些伪类都是根据所有的子元素进行排序

1、:first-of-type 第一个子元素

2、:last-of-type 最后一个子元素

3、:nth-of-type() 选中第n个子元素

功能跟上面相似，

不同的是，这是在同类型的子元素中去选择

二、:not() 否定伪类

-将符合条件的元素从选择器中去除

9.元素的伪类

1、:link 用来表示未访问过的链接（正常链接）

2、:visited 用来表示访问过的链接，由于隐私的原因，所以visited只能改颜色

3、:hover 用来表示鼠标移入的状态

4、:active 鼠标点击后的状态

10.伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 选中的内容

::before 元素的开始位置

::after 元素的结束位置

before和after必须要结合content使用 */

11.继承

样式的继承（继承祖先的资产）

定义：为一个元素设置的样式，同时也会应用到它的后代元素上

优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式

注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关等不会被继承

12.选择器的权重

选择器的权重

内联样式 1000

id选择器 100

类和伪类选择器/属性选择器 10

元素选择器 1

通配符、子选择器、相邻选择器等。如*、>、+ 0000

继承的样式没有优先级

!important 最高优先级

注意：

比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示

(并集选择器)分组选择器是单独计算的

如果优先级计算后相同，此时则优先使用靠下的样式

选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器量变达不到质变

一般来说：

选择器越具体，优先级越高

!important 慎用

样式冲突通过不同的选择器选中同一个元素，进行一样的样式设定

发生样式冲突时，应用哪一个样式由选择器的权重（优先级）决定