【学习笔记】css选择器基础概念复习

热门标签

, ,

本博客主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

选择器概念

选择器分类

  • 基本选择器:共有 5 个基本选择器,是 CSS 选择器的最为基本的用法。
  • 层级选择器:共有 4 个层级选择器,是根据 HTML 元素之间的关系来定位 HTML 元素。
  • 组合选择器:具有交集和并集两种用法,是将之前基本选择器和层级选择器进行组合。
  • 伪类选择器:允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。
  • 伪元素选择器:定位所有未被包含 HTML 的实体。

基本选择器

  1. 类型(Type)选择器(有些中文资料中称为“元素选择器”
  2. 类(Class)选择器
  3. ID 选择器
  4. 通用选择器(有些中文资料中称为“通配符选择器”
  5. 属性选择器

类型选择器

类型选择器,又称为元素选择器

元素名{
    属性:属性值;
}

类选择器

.classname{
        属性:属性名;

}

【学习笔记】css选择器基础概念复习

ID选择器

#ID{
        属性:属性值;
}

【学习笔记】css选择器基础概念复习

通用选择器

*{
    属性:属性值;
}

属性选择器

  • [attr] 属性选择器:通过 HTML 元素的 attr 属性名来定位具体 HTML 元素,而不关注 attr 属性的值是什么。
  • [attr=value] 属性选择器:通过 HTML 元素的 attr 属性名并且属性值为 value 来定位具体 HTML 元素。
  • [attr~=value] 属性选择器:通过 HTML 元素的 attr 属性名,属性值是一个以空格分隔的列表并且 value 值是该值列表中的之一,来定位具体 HTML 元素。
  • [attr|=value] 属性选择器:通过 HTML 元素的 attr 属性名并且属性值为 value 或者以 value- 为前缀来定位具体 HTML 元素。
  • [attr^=value] 属性选择器:通过 HTML 元素的 attr 属性名并且属性值是以 value 为开头来定位具体 HTML 元素。
  • [attr$=value] 属性选择器:通过 HTML 元素的 attr 属性名并且属性值是以 value 为结束来定位具体 HTML 元素。
  • [attr*=value] 属性选择器:通过 HTML 元素的 attr 属性名并且属性值是包含 value 来定位具体 HTML 元素。

选择器的优先级

优先级的计算方式如下:

  1. 优先级就是分配给指定的 CSS 声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。
  2. 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。
  3. 当同一个元素有多个声明的时候,优先级才会有意义。

选择器类型权重

  1. 通配符选择器的优先级为 0
  2. 类型(元素)选择器的优先级为 1
  3. 类选择器和属性选择器的优先级为 10
  4. ID 选择器的优先级为 100
  5. 内联样式的优先级为 1000

内联样式总会覆盖内嵌样式表和外联样式表的任何样式

!important 例外规则

如果使用 !important 规则的话,会覆盖掉所有其他选择器的声明样式。

注意:由于 !important 规则会破坏 CSS 选择器类型的权重规则,所以在开发中不建议使用。

未经允许不得转载:作者:乔越, 转载或复制请以 超链接形式 并注明出处 乔越博客
原文地址:《【学习笔记】css选择器基础概念复习》 发布于2020-01-02

分享到:
赞(1) 打赏

评论 1

8 + 7 =
  1. #1

    第一单号网提供快递单号、淘宝快递单号、拼多多单号www.01kd.com

    gjj5天前回复
【学习笔记】css选择器基础概念复习

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

79代刷网
代刷网各种代刷 售后有保证 代做各种网站有需要留言给我即可!
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册