HTML中关于选择器的介绍

HTML中关于选择器的介绍

今天分享一些关于HTML中选择器，以及对应的使用方法，很多人学习了CSS就想着对自己的网页进行样式渲染：

这是没有用CSS进行样式渲染的网页：

样子实在让人提不起兴趣；undefined此时我们就需要用到CSS把网页变一下，这时就需要一个很重要的东西选择器。 只需要经过CSS简单的渲染(小编实力有限只进行了一点的CSS操作),然后网页的样式就可以变成这样

在使用CSS时始终绕不过的话题就是选择器：

选择器有以下几个： 元素选择器undefined`

p {

text-align: center;

color: red;

}`

ID选择器undefined`

footer {

background-color: black;

color: white;

}`

类选择器undefined`

menu {

background-color: blue;

color: white;

}`

属性选择器undefined`

inputtype="submit" {

background-color: green;

color: white;

}`

交集选择器undefined`

a.have {

text-decoration: underline;

}`

后代选择器undefined`

p line {

font-weight: bold;

}`

这六种选择器(常用)，在你进行代码编写时需要根据自己的项目需要选择最优的选择器。

选择器可以让我们在对网页进行具体渲染时可以选定特定的模块进行个性化改变。

ID选择器，需要设定相应的ID值但是ID值在同一个文档中不能重复并且也不能以数字开头；

class选择器，需要设置相应的class值class值对于一个元素可以设置一个或多个，如果需要设置多个就需要用空格分开；

元素选择器，使用时对对应的元素进行修改，代码中有多个相同元素可以一次性全部进行修改，但有时也会酿成大错(多个样式叠加在一起无法体现出来)；

属性选择器，属性选择器就是在标签内部使用style将需要修改的样式编写进去；

交集选择器，同时满足两个或者多个不同类型的选择器进行相应的修改；

后代选择器，在使用时需要用空格隔开，在父标签下的子标签，是对子标签进行样式的修改；

HTML中几种常用(小编自己认为)的选择器介绍到这，这些选择器需要大家多使用并且理解才可以熟练运用，感谢大家的阅览，文中有错误或是需要补充的地方还希望大佬能指出来。

本文由“云萌工作室-编程开发基础”专栏提供，关注更多编程技巧与知识。

@Author: hardworking novice

@Date: 2025/03/02