css的选择器及优先级

一、css选择器

CSS选择器是用来选择HTML文档中的元素,并为它们应用样式规则的工具。CSS选择器有很多种,可以根据元素的类名、ID、属性、伪类、伪元素、标签等来选择元素。以下是一些常见的CSS选择器及其用法:

1. ID选择器

  • 根据元素的ID属性选择元素。

  • 例如:#idName选择id="idName"的元素。

  • 使用场景

    • 用于页面中唯一的元素,如页面结构中的主要标题或导航栏。

    • 用于创建特定元素的特定样式,因为ID选择器的优先级很高。

  • 注意事项

    • 每个ID在页面中应该是唯一的,不要为多个元素使用相同的ID。

    • 过度使用ID选择器可能会使CSS难以维护。

2. 类选择器

  • 根据元素的类属性选择元素。

  • 例如:.className选择所有具有class="className"的元素。

  • 使用场景

    • 用于为多个元素应用相同的样式,这些元素在页面上多次出现。

    • 用于响应JavaScript操作,如添加或移除类来改变样式。

  • 注意事项

    • 类名应该描述性强,易于理解,以提高代码的可读性。

    • 避免使用过度具体的类名,这可能会导致样式难以复用。

3. 属性选择器

  • 根据元素的属性及其值选择元素。

  • 例如:[type="text"]选择所有<input type="text">元素。

  • 使用场景

    • 用于根据元素的属性或属性值来应用样式,如表单输入字段的类型。

    • 用于创建更复杂的选择器,结合其他选择器使用。

  • 注意事项

    • 属性选择器可能会降低CSS的性能,特别是在大型文档中。

    • 确保属性选择器的使用是必要的,避免过度使用。

4. 伪类 选择器

  • 根据元素的特定状态选择元素,如:hover:focus:nth-child()等。

  • 例如:a:hover选择鼠标悬停在链接上的状态。

  • 使用场景

    • 用于定义链接的不同状态,如:hover:active

    • 用于选择特定的元素状态,如:nth-child():checked

  • 注意事项

    • 伪类选择器不应该与结构类选择器混淆,它们表示的是元素的状态而不是类型。

    • 确保伪类选择器的使用不会与页面的可访问性冲突。

5. 否定 伪类 选择器(:not)

  • 用于选择不符合某些条件的元素。

  • 它是一个非常有用的工具,它可以帮助你更精确地控制页面上的元素样式。

  • 例如::not(.visible)选择所有不包含class="visible"的元素。

  • 使用场景

    • 用于排除具有特定类、ID或其他条件的元素。

    • 使用否定伪类可以避免编写多个选择器,从而简化CSS规则。

  • 注意事项

    • 否定伪类选择器在现代浏览器中普遍支持,但在一些旧版本的浏览器中可能不受支持。

    • 否定伪类选择器的性能可能受到影响,尤其是在复杂的选择器中。

    • 使用时应注意选择器的准确性,避免创建过于复杂的选择器表达式。

6. 伪元素选择器

  • 用于选择元素的特定部分,如::before::after

  • 例如:p::first-letter选择每个<p>元素的第一个字母。

  • 使用场景

    • 用于创建装饰性元素,如在文本周围添加特定的背景或边框。

    • 用于修改元素的第一部分或最后一部分,如::first-line::first-letter

  • 注意事项

    • 伪元素内容(如content: "")可能会影响页面的可访问性。

    • 伪元素可能会使CSS规则复杂化,应谨慎使用。

7. 标签选择器

  • 根据元素的标签名选择元素。

  • 例如:p选择所有<p>元素。

  • 使用场景

    • 用于为所有同类型的元素应用样式。

    • 用于创建基本的页面样式,如所有段落文本的字体大小。

  • 注意事项

    • 标签选择器的优先级较低,容易被其他更具体的选择器覆盖。

    • 避免为所有元素设置过于通用的样式,以免造成样式冲突。

8. 后代选择器(空格)

  • 后代选择器使用空格来表示。

  • 它选择指定元素的所有后代元素,无论它们之间有多少层嵌套。

  • 例如:div p选择所有在<div>元素内部的<p>元素。

  • 使用场景

    • 用于选择嵌套在另一个元素内部的所有元素。

    • 用于为大型组件或模块内的所有元素设置样式。

  • 注意事项

    • 后代选择器可能会导致样式应用到不希望的元素上。

    • 使用时应注意选择器的精确度,避免不必要的样式继承。

9. 子选择器(>)

  • 子选择器使用大于号>来表示。

  • 它选择作为指定元素直接子元素的元素。

  • 例如:div > p选择所有直接在<div>元素内部的<p>元素,不包括那些嵌套在其他元素内部的<p>元素。

  • 使用场景

    • 用于选择直接子元素。

    • 用于创建父子元素之间的布局关系,如导航菜单项。

  • 注意事项

    • 子选择器只选择直接子元素,不包括更深层次的后代。

    • 确保使用子选择器时,DOM结构符合你的选择需求。

10. 相邻兄弟选择器(+)

  • 相邻兄弟选择器使用加号+来表示。

  • 它选择紧随指定元素之后的相邻兄弟元素。

  • 例如:h1 + p选择紧随<h1>元素之后的<p>元素。

  • 使用场景

    • 用于选择紧随另一个元素后的元素。

    • 用于设计元素之间的紧挨着的布局,如列表项后的段落。

  • 注意事项

    • 相邻兄弟选择器只作用于相邻的兄弟元素。

    • 确保使用相邻兄弟选择器时,元素的顺序符合你的设计需求。

11. 通用兄弟选择器(~)

  • 通用兄弟选择器使用波浪号~来表示。

  • 它选择指定元素之后的所有兄弟元素,这些兄弟元素与指定元素有相同的父元素。

  • 例如:h1 ~ p选择所有在<h1>元素之后的<p>元素,无论它们之间是否有其他类型的元素。

  • 使用场景

    • 用于选择在另一个元素之后的所有兄弟元素。

    • 用于为一系列元素设置样式,这些元素与某个特定元素有相同的父元素。

  • 注意事项

    • 通用兄弟选择器会选择所有后续的兄弟元素,而不仅仅是相邻的。

    • 使用时应注意选择范围,避免样式应用到不想要的元素上。

12. 通配符选择器(*)

  • 通配符选择器使用星号*来表示。

  • 它用于选择文档中的所有元素,一般用来设置一些默认样式。

  • 例如:*选择所有的元素

  • 使用场景

    • 用于为页面上的所有元素设置默认样式。

    • 用于CSS重置或规范化,以确保跨浏览器的一致性。

    • 用于覆盖浏览器的默认样式或之前定义的样式。

  • 注意事项

    • 通配符选择器的性能成本较高,尤其是在元素数量多的页面上,浏览器需要遍历DOM树中的每个节点来应用这些样式,这可能会增加渲染时间。

    • 通配符选择器的广泛匹配,应谨慎使用,以免无意中覆盖其他样式或影响性能。

    • 通配符选择器的优先级很低,这意味着它很容易被其他更具体的选择器覆盖。

一般情况下,根据自身的需求和代码习惯来选择合适的选择器,但是在使用这些选择器时,也应该考虑到它们的优先级、性能影响、代码的可维护性和可读性,合理的使用选择器可以提高CSS的效率和页面的性能。

二、css选择器的优先级

CSS选择器的优先级(也称为特异性)决定了当多个选择器应用于同一个元素时,哪个选择器将被应用。优先级是由选择器的类型决定的,不同类型的选择器具有不同的优先级权重。以下是选择器优先级的决定因素,按优先级从高到低排列:

1. 内联样式

  • 直接在HTML元素的style属性中定义的样式规则具有最高的优先级。

2. ID选择器

  • 每个ID在页面中应该是唯一的,因此ID选择器具有较高的优先级。

  • 优先级权重:1个ID = 10000。

3. 类选择器、属性选择器和伪类选择器:

  • 这些选择器用于定义元素的类别、属性或状态。

  • 优先级权重:1个类/属性/伪类 = 10。

4. 标签选择器、伪元素选择器和关系选择器:

  • 这些选择器基于元素的类型或其在文档中的位置。

  • 优先级权重:1个类型/伪元素/关系选择器 = 1。

5. 通配符选择器(*):

  • 通配符选择器没有优先级权重,因为它匹配所有元素。

6. 否定 伪类:not):

  • 否定伪类的优先级取决于它所否定的选择器的优先级。

7. 继承

  • 某些CSS属性是从父元素继承而来的,它们的优先级最低。

8. !important规则

  • 如果在CSS规则中使用了!important声明,那么它将覆盖其他所有规则,无论它们的优先级如何。

注意事项:

  • 当优先级相同时,最后声明的规则将生效。

  • !important声明应该谨慎使用,因为它会打破自然的优先级规则,可能导致代码难以维护。

  • 优先级是基于选择器的组合计算的,而不是单个选择器。

  • 继承的样式没有优先级权重,但它们可以被更高优先级的规则覆盖。

理解CSS选择器的优先级对于解决样式冲突和编写更有效的CSS代码非常重要。

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#