Web——CSS选择器类型

最新推荐文章于 2025-04-05 17:59:45 发布

小美灵

最新推荐文章于 2025-04-05 17:59:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： css html web

本文链接：https://blog.csdn.net/weixin_45952057/article/details/109032236

web 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS的基本概念，包括其用于网页布局、颜色和样式控制的作用。详细阐述了编辑CSS的两种方式，即内联样式和外部样式表，并重点讨论了CSS选择器的五种类型：标记选择器、类选择器、ID选择器、伪类选择器和属性选择器，以及组合选择器的四种形式。同时，强调了各种选择器的书写格式和优先级问题。

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

一、什么是CSS？

在设计网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制

二、编辑CSS的方式有哪些？

编辑CSS主要有两种方式：
1、写在HTML文件里的CSS规则。在HTML里根据位置又可以划分为两种形式：（1）写在某个元素的属性部分，作为style属性的值；（2）写在head标记里面，通过style标记包含。
2、将CSS规则写在单独的文件里。该文件被称为CSS文件，是纯文本文件，后缀名为“.css”。在需要应用CSS规则的多个HTML文件里引用该CSS文件，分离内容和表现，提高了网站的可维护性。
对于初学者，一般使用第一种方法。对于代码量大的工程，建议第二种方法

三、CSS规则

CSS控制页面是由CSS规则实现的，CSS规则由选择器和声明组成。选择器通俗地讲就是“代码样式模板”，而声明就是“模板里面的填充代码”。

四、CSS的选择器类型

CSS选择器主要有五种类型：标记选择器、类选择器、id选择器、伪类选择器和属性选择器。
上面五种选择器是基础的选择器，也可以在此基础上对选择器进行组合，从而产生了四种“组合选择器”：联合选择器（又称：交集选择器）、通配选择器、并集选择器、派生选择器（又称：后代选择器、上下文选择器）

1、标记选择器（元素选择器）
标记选择器是直接使用HTML中的标记名作为选择器。
在这里插入图片描述如上图，这里的圈出的body{}和p{}都是HTML的标记名，在此处body{}定义了<body>里面的内容属性，即文字居中；p{}定义了`

内的内容属性。这里要注意优先级问题。
2、类选择器
在这里插入图片描述如上图画圈处所示，先在HTML标记中通过class属性为设置类名（命名必须以字母开头），之后再在头部style下设置点号“.”+类名称设置属性要求。
3、id选择器
id选择器设置方法与类选择器设置方法类似。
在这里插入图片描述
如上图所示，在HTML标记内设置id名（命名必须以字母开头），之后再在style属性中设置“#”+id名设置属性。注意同一个网页id名不可以重复使用。
四、伪类选择器
伪类选择器主要用于超链接，即“超链接伪类”
在这里插入图片描述
如上图所示

a:link{}     设置未被访问过的超链接的状态；
a:visited{}  设置已访问过的超链接状态；
a:hover{}    设置鼠标悬停时的超链接状态；
a:active{}   设置已选中的超链接状态（按住超链接不松手时的超链接的状态）

这里要注意：a:link和a:visited必须放在a:hover和a:active之前才有效；a:hover必须放在a:active之前
效果如下：

伪代码链接样式

四种基础的选择器类型都要注意书写格式：属性与属性之间用“；”隔开，最后一个属性值写完之后也要加“；”

5、交集选择器
通常是标记选择器和类选择器或者标记选择器和id选择器搭配使用。但要注意的是，标记选择器一定要写在类选择器或是id选择器的前面。

p.c2{color:green;font-weight:bold;}
li#c3{color:red;}

*以第一行代码为例：选择class=“c2”的<p>元素
6、并集选择器
某些选择器风格完全相同，可以一起定义

h1,h2.spacial,.spacial,#one{text-decoration:underline;}

*表示：h1、spacial类下的h2、spacial类和one id选择器风格相同
*选择器之间用逗号隔开
7、通配选择器

*{color:purple;font-size:16px;}

*表示：所有的选择器都被选中，都是上面所示的这个属性

8、后代选择器

li strong{font-style:italic;}

*表示：只有li标记下的strong标记所表示的内容样式为斜体。
标记之间用空格隔开