css选择器有哪些?各种选择器优先级大小顺序

1、类型选择器

CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器),可以向这种元素类型的每个实例上应用声明。例如,以下简单规则的选择器是H1,因此规则作用于文档中所有的H1元素。

2、简单属性选择器

CLASS属性

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲,可以使用CLASS属性来分类元素,在样式表中创建规则来引用CLASS属性的值,然后浏览器自动将这些属性应用到该组元素。

类选择器以标志符(句点)开头,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择句点是因为在很多编程语言中它与术语"类"相关联。翻译成英语,标志符表示"带有类名的元素"。

ID属性

ID属性的操作类似于CLASS属性,但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。

需要注意的是,ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。

STYLE属性

尽管在选择器中可以使用CLASS和ID属性值,STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值),STYLE属性的值实际上是一个或多个CSS声明。

通常情况下,使用CSS,设计者将把所有的样式规则置于一个样式表中,该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是,使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。

3、组合选择器类型

可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器,可以更加精确地处理希望赋予某种表示的元素。例如,要组合类型选择器和类选择器,一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。

外部信息:伪类和伪元素

在CSS1中,样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行,但是它无法实现设计者希望获得的一些常见的设计效果。

设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中,使用伪类可以根据一些情况改变文档中链接的样式,如根据链接是否被访问,何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素,可以更改元素的第一个字母和第一行的样式,或者添加源文档中没有出现过的元素。

伪类和伪元素都不存在于HTML;也就是说,它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS选择器如下:
  1. 标签名选择器 div { color:Red;} /即页面中的各个标签名的css样式
  2.类选择器 .divClass {color:Red;} /即定义的每个标签的class 中的css样式
  3.ID选择器 #myDiv {color:Red;} /即页面中的标签的id
  4.后代选择器(类选择器的后代选择器) .divClass span { color:Red;} /即多个选择器以逗号的格式分隔 命名找到准确的标签
  5.群组选择器 div,span,img {color:Red} /即具有相同样式的标签分组显示
  选择器的优先级
  1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)<div style="color:Red;"></div>
  2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}
  3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}
  4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}
  5.那么后代选择器的优先级就可以计算了啊
  比如 .divClass span { color:Red;} 优先级别就是:10+1=11

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值