CSS实例教程:CSS Selector的优先级

最新推荐文章于 2024-06-19 15:19:49 发布
最新推荐文章于 2024-06-19 15:19:49 发布
阅读量319 收藏
点赞数
分类专栏： css

上周五下班前我们敬爱的三三大人又在组里讨论了关于“11个class与一个id”谁的优先级高的问题～_～！


猜一下

01<!DOCTYPE HTML>
02<html>
03<head>
04<meta charset="utf-8">
05<style type="text/css">
06body{font-family: "Microsoft YaHei";}
07.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;}
08#b{color:green;}
09</style>
10</head>
11 
12<body>
13<div class="a1">
14<div class="a2">
15<div class="a3">
16<div class="a4">
17<div class="a5">
18<div class="a6">
19<div class="a7">
20<div class="a8">
21<div class="a9">
22<div class="a10">
23<div class="a11" id="b">
24CSS Selector的优先级
25</div>
26</div>
27</div>
28</div>
29</div>
30</div>
31</div>
32</div>
33</div>
34</div>
35</div>
36</body>
37</html>

答案很明显就是你看到的那样儿，究竟为什么一时又很难说的清楚。

今天突然想到精通css里讲到过关于css特殊性的计算，原来是酱紫的…

所有的selector都被分配一个数值（包含内联），将所有selector值相加得到最终优先级。但是计算中并不是满10进1来计算，而是采用一个没有指定的更高的基数。保证高级别的selector(id)不被那11个或者更多低级的selector组合超出。
selector的特殊性分四个等级：a,b,c,d可将a看成是最高位以此类推

 

  • 如果样式为内联a=1
  • b为id的总数
  • c为class, pseudo-class, and attribute selectors总数

得出此表：
 

转载地址：http://www.poluoluo.com/jzxy/201202/153528.html

dw_bao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css样式优先级比较实例
01-31
css样式优先级比较实例， css样式优先级比较实例， css样式优先级比较实例
[转]CSS Selector的优先级
weixin_30580341的博客
03-16 84
上周五下班前我们敬爱的三三大人又在组里讨论了关于“11个class与一个id”谁的优先级高的问题～_～！ 猜一下 01 <!DOCTYPE HTML>02 <html>03 <head>04 <meta charset="utf-8">05 <style type="text/css"...
CSS选择器详解与应用实例
最新发布
一起coding，一起嗨。
06-19 776
CSS选择器详解与应用实例
css selector的优先级
weixin_34185364的博客
01-04 112
Selector Specificity 行内样式 style="" 1,0,0,0 id选择器 #content {} 0,1,0,0 class选择器 .content{} 0,0,1,0 标签选择器 div{} 0,0,0,1 2个id选择器 #div #content{} 0,2...
关于CSS Selector的优先级
小荷才露尖尖角
05-16 307
用CSS这么些年，从来没从算法级别考虑过它的优先级原理，只是凭经验记住类似“id最大，class其次”这种tip。今儿看到一篇讲css优先级算法的文章，豁然开朗，引过来，记录一下。   其实CSS的算法就是下面这张图，     解释一下：    CSS中主要有 style， #， .，tag，四种 selector 。按照顺序分别占据*,*,*,*的第1，2，3，4个位置。将一串...
css_selector实例
zjq_blog
01-26 201
1 * { } 0 3 li:first-line { } 2 (one element, one pseudo-element) 5 ul ol+li { } 3 (three elements) 7 ul ol li.red { } 13 (one class, three elements) 9 style=”” 1000 (one inline styling) 11 ...
英文css教程：Introduction CSS
09-27
CSS样式规则由选择器（selector）和声明块（declaration block）组成。选择器指定了要应用样式的元素，声明块包含一组属性（property）和值（value），以冒号分隔，每组属性值之间用分号结束。例如： ```css p { ...
CSS 学习笔记之CSS Selector
09-24
CSS选择器是CSS（层叠样式表）中用于定位网页元素并为其添加样式的重要工具。理解并熟练掌握CSS选择器是每个前端开发者的基础技能。下面将详细解释CSS选择器的各种类型及其用法。 1. 类型选择器： 类型选择器是最...
HTML5&CSS3网页制作：CSS优先级.pptx
05-31
在多个CSS规则应用于同一元素时，理解CSS优先级至关重要，因为它决定了哪个样式会生效。这个概念对于创建美观且功能完备的网页至关重要。 首先，我们来探讨CSS优先级的基本原则： 1. 继承性：当一个元素没有明确的...
CSS样式定义的优先级顺序介绍
09-25
在CSS（层叠样式表）中，样式定义的优先级是非常关键的概念，它决定了当多个样式规则同时作用于一个元素时，哪个规则会被应用。理解这个优先级顺序有助于开发者更精确地控制页面的呈现效果。下面我们将深入探讨CSS...
css基础教程之CSS基础语法
09-25
在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。 首先，我们需要了解CSS的核心目标是实现表现与结构的分离，即HTML负责内容的结构，而CSS负责内容的呈现方式。接下来，我们将介绍四...
CSS 样式优先级和一些实例
weixin_44799645的博客
11-08 841
今天给大家一起学习一下CSS 样式优先级和一些实例吧！ 小常说一下： 不要沉沦,在任何环境中你都可以选择奋起.一起加油吧！ 如果按照 CSS 的来源，可以将网页定义的样式分为 4 种： HTML 默认样式； 作者（网站开发者/程序员）定义的样式； 用户（网站使用者）设置的样式； 浏览器默认样式。 原则上讲，作者定义的样式优先于用户设置的样式，用户设置的样式优先于浏览器的默认样式，而浏览器的默认样式...
css样式优先级示例
香蕉你个芭呐呐的博客
06-14 506
1.一个DIV中既有class又有id DOCTYPE html> html> head> meta charset="utf-8" /> style type="text/css"> #box1{color:red;} .box1{color:blue;} .box2{col
Selenium学习之==>Css Selector使用方法
weixin_34112030的博客
07-20 190
一、什么是Css Selector 　　Css Selector定位实际就是HTML的Css选择器的标签定位 工具 　　Css Selector的练习建议大家安装火狐浏览器后，下载插件，FireFinder 或FireBug和FirePath组合使用。 二、Css Selector使用方法 1、通过ID、Class定位 1 ID定位 2 #号代表id，定位有id的标签方式更加简...
实例比较CSS中三种基础选择器的优先级大小
x1785551的博客
12-07 287
例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p{ color: blue; } .green{ color:...
css选择器权重介绍
spider_man
10-27 260
选择器与伪元素的权重情况：高权重的选择会覆盖低权重的展示样式 选择器 表达式或示例 说明 权重 行内选择器 style="" 1000 id选择器 #aaa 100 类选择器 .aaa 10 标签选择器 h1 元素的tagname 1 属性选择器 img[alt]、div[class^='pus'] 10 相邻选择器 selecter...
css selector什么意思
keke795的博客
02-09 399
css selector指的是css选择器，是用来匹配网页中的dom元素的，常用选择器可分为标签名选择器、类选择器、id选择器、派生选择器、子元素选择器、分组选择器和伪元素选择器。 推荐：《css视频教程》 css selector指的是css 选择器，是用来匹配网页中的dom元素的，css样式的定义为：选择器{样式}。“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。 要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页
css selector简介
热门推荐
tenfyguo的技术专栏
08-01 1万+
一.Tag selector标签selecor ,也可以称为类型selector，它将对HTML页面中所有的该类型有效。h1 {    font-family:Arial,sans-serif;    color:#CCCCFF;}表示所有h1标签都适用该CSS的rule，当然为了缩短代码，适用相同的rule的多个HTML Tag可以用逗号分隔开进行统一的修饰。如DIV,H1 {}二.Class Selector类选择器和HTML中的class相结合，应用到所有声明了该class的标签中。类选择器必须要
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值