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代码非常重要。

相关推荐
dr李四维9 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~30 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ33 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z39 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript