2025年【网页设计】28：CSS选择器

大家好，我是讯享网，很高兴认识大家。

第28节：CSS选择器

CSS选择器概念：选择器是一种模式，用于选择需要添加样式的元素

1.CSS选择器：

（1）元素选择器：

定义：标签名作为选择器的一种使用方式
特点：不能更改某一元素，选择器选中的是页面内所有对应的标签，不管标签藏的多深都能够通过标签选择器选中
书写方式：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body style="background-color:#fffae8;"> <!-- 1.元素选择器：标签名作为选择器的一种使用方式 --> <p>我喜欢二狗子的妹妹</p> <p>我喜欢二狗子的妹妹</p> <p>我喜欢二狗子的妹妹</p> <p> <p> <p> <p>我是藏的很深的p标签</p> </p> </p> </p> </body> </html>

讯享网

讯享网/* 1.元素选择器 */ p{ 
    color: pink; }

在这里插入图片描述

（2）class选择器：

定义：通过标签的class属性，在CSS样式表里选择相应的class名的标签
特点：可以选择一部分标签添加相同的样式，元素可以重名，一个元素可以有多个class名
书写方式：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body style="background-color:#fffae8;"> <!-- 2.class选择器：在html标签内书写class属性，在css中链接相应的class名，class名前加点 --> <p class="purple border">我喜欢二狗子的妹妹</p> <p>我喜欢二狗子的妹妹</p> <p>我喜欢二狗子的妹妹</p> <p> <p> <p> <p>我是藏的很深的p标签</p> </p> </p> </p> </body> </html>

讯享网/* 1.元素选择器 */ p{ 
    color: pink; } /* 2.class选择器 */ .purple{ 
    color: purple; } .border{ 
    border: 1px solid purple; }

在这里插入图片描述

（3）id选择器：

定义：通过标签内的id属性值，来选择相应的标签
特点：一个页面中不允许出现相同的id名，一般配合JavaScript使用
书写方式：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body style="background-color:#fffae8;"> <!-- 3.id选择器：在标签内书写id属性值，在CSS中链接相应id名，记得在id名前加#号 --> <p class="purple border">我喜欢二狗子的妹妹</p> <p id="blue">我喜欢二狗子的妹妹</p> <p>我喜欢二狗子的妹妹</p> <p> <p> <p> <p>我是藏的很深的p标签</p> </p> </p> </p> </body> </html>

讯享网/* 1.元素选择器 */ p{ 
    color: pink; } /* 2.class选择器 */ .purple{ 
    color: purple; } .border{ 
    border: 1px solid purple; } /* 3.id选择器 */ #blue{ 
    color: blue; }

在这里插入图片描述

（4）*通配符：

定义：可以选中包括body在内的所有标签，一般用于重置样式
书写方式：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body style="background-color:#fffae8;"> <!-- 4.*通配符：页面中所有的标签包含在内，一般用于重置样式 --> <p class="purple border">我喜欢二狗子的妹妹</p> <p id="blue">我喜欢二狗子的妹妹</p> <p>我喜欢二狗子的妹妹</p> <p> <p> <p> <p>我是藏的很深的p标签</p> </p> </p> </p> </body> </html>

讯享网/* 1.元素选择器 */ p{ 
    color: pink; } /* 2.class选择器 */ .purple{ 
    color: purple; } .border{ 
    border: 1px solid purple; } /* 3.id选择器 */ #blue{ 
    color: blue; } /* 4.*通配符 */ *{ 
    background-color: peru; }

在这里插入图片描述

提问：

这里*通配符通过改变background-color为peru改变了背景颜色，但是仔细观察发现在body中行内样式表设置的颜色仍然存在，这是为什么？

求大佬指点

（5）群组选择器：

定义：群组选择器（并集选择器），很多元素可能都有相同的CSS样式，可以通过并集选择器将这些标签写在一起，统一设置CSS样式
书写方式：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body style="background-color:#fffae8;"> <!-- 5.群组选择器：将标签打组统一设置样式 --> <p class="purple border">我喜欢二狗子的妹妹</p> <p id="blue">我喜欢二狗子的妹妹</p> <p>我喜欢二狗子的妹妹</p> <ul> <li>二狗子</li> <li>狗子妹</li> <li>铁憨憨</li> </ul> </body> </html>

讯享网p{ 
    color: pink; } .purple{ 
    color: purple; } #blue{ 
    color: blue; } /* 5.群组选择器 */ p,li{ 
    color: skyblue; }

群组选择器使用前后效果对比：

在这里插入图片描述

注意：这里的群组选择器将p标签与li标签打组，但是前两句话并没有变色（涉及到选择器的权重问题）

（6）包含选择器：

定义：通过标签之间的嵌套关系、层级关系限定大体的范围，在这个范围内具体查找相关元素
特点：选择器之间用空格隔开，前面的选择器必须是后面选择器的父级标签（后代关系即可）
书写方式：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body style="background-color:#fffae8;"> <!-- 6.包含选择器：通过标签之间的嵌套关系、层级关系限定大体的范围 --> <ul class="box"> <li>二狗子</li> <li>狗子妹</li> <li>铁憨憨</li> </ul> <ul> <li>二狗子</li> <li>狗子妹</li> <li>铁憨憨</li> </ul> </body> </html>

讯享网.box li{ 
    color: mediumvioletred; }

在这里插入图片描述

（7）伪类选择器之划过效果：

示例：鼠标经过文本，文本颜色发生改变

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body style="background-color:#fffae8;"> <!-- 7.伪类选择器之划过效果 --> <p id="blue">我喜欢二狗子的妹妹</p> </body> </html>

讯享网#blue:hover{ 
    color: purple; }

在这里插入图片描述

2.选择器权重问题：

选择器	权重
元素选择器	1
class选择器	10
id选择器	100
包含选择器	等于每个选择器之和
群组选择器	单独计算
伪类选择器	10

注意：当权重相同时，写在后面的选择器起作用

2025年【网页设计】28：CSS选择器

第28节：CSS选择器

1.CSS选择器：

（1）元素选择器：

（2）class选择器：

（3）id选择器：

（4）*通配符：

（5）群组选择器：

（6）包含选择器：

（7）伪类选择器之划过效果：

2.选择器权重问题：

相关推荐