css选择器，什么是css选择器

最新推荐文章于 2025-02-16 08:57:12 发布

高昌志

最新推荐文章于 2025-02-16 08:57:12 发布

阅读量993

点赞数 1

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/m0_70977782/article/details/129205346

版权

本文介绍了CSS选择器的基本概念和类型，包括通配选择器(*)、元素名称选择器、类选择器(如:.box)和ID选择器(如:#box)。类选择器在基础选择器中最为常用，ID具有唯一性，适用于页面独特元素。优先级顺序为：ID>类>元素名称>通配。文章还提到了选择器的使用场景，以及如何使用开发者工具进行样式调试。

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

CSS选择器

1、什么是选择器

CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始

CSS选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式

选择器可以分为基础选择器、复合选择器

2、基本选择器

2.1 通配（通用）选择器

语法

*{ 样式声明; }

作用：匹配任意类型的HTML元素

实例演示:

2.2 元素名称选择器

语法：

元素名称 { 样式声明;}

作用：选择所有同一元素名称的所有元素

实例演示:

/* 选择body */body{ background-color:green;}/* 选择页面上所有的div */div{ width:100px; height:100px; background-color:red;}/* 选择页面上所有的p */p{ background-color: pink;}

2.3 类选择器

语法

HTML中通过class属性定义

如：

css中以点进行标识:

.类名 { 样式声明;}

作用:选择所有带有指定类名的元素

多类名的使用

语法：空格隔开

实例演示:

id选择器

语法

HTML中通过id属性定义

如：

css中以点进行标识:#

#id名称 { 样式声明;}

作用:选择所有带有指定类名的元素

实例演示:

#box{ background-color:red;}<div id="box">div1</div>

注意：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。

类与id的命名规则

见词知义，尽量用英文

始终建议以字母开头，可以包含数字、字母、下划线等

不要以数字开头

多个单词可以以驼峰式（newsCont）、中划线连接（news_cont）、下划线连接（news-cont）等

总结

总结使用频率

基础选择器中最常用是类选择器

id用于页面中唯一模块

元素名称选择器定义的全局样式，单独使用要慎重

*号通常用于重置样式【最不常用】

总结id与类的区别

基础选择器的优先级

对比

渗透调试工具的使用

F12/右键-检查左边是 HTML 元素结构，右边是 CSS 样式Ctrl+滚轮可以放大、缩小开发者工具代码大小Ctrl + 0 复原浏览器大小右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误如果有样式，但是样式被中划线贯穿，说明可能存在书写顺序或优先级问题