按一般论:
ID > Class > 标签

1.如以下样式:

 <div id="id" class="class">选择器优先权</div>
#id{color:#aaa;}
.class{color:#bbb;}
div{color:#ccc;}

这里,最后输出 的结果为 #aaa;

2.如果把选择器改为:

 #id{color:#aaa;}
#id .class{color:#bbb;}
div{color:#ccc;}

最后,这里输出的颜色为:#bbb;

3.但如果HTML改为:

 <div id="id" class="class"><b>选择器优先权</b></div>
#id{color:#aaa;}
.class{color:#bbb;}
b{color:#ccc;}

这里最后输出结果即为:#ccc;

因为 #id与 .class 并没有直接作用于对象上,故最后的结果为 b 的 #ccc;

ID、Class和标签选择器优先级的更多相关文章

  1. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  2. CSS选择器优先级

    1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序     例如: .a{ color:red } .b{ color:green }     由于b晚于a定义,所以b覆盖a,反 ...

  3. day48 前端高级选择器优先级

    复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...

  4. 我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

    首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style t ...

  5. CSS中选择器优先级与!important权重使用

    CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...

  6. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  7. jquery基本选择器:id选择器、class选择器、标签选择器、通配符选择器

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本选择器 jquery基本选择器,包括id选择器.class选择器.标签选择器.通配符选择器,同时配合选择器的空格 ...

  8. jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换

    首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  9. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

随机推荐

  1. hihoCoder 1014 Trie树 (Trie)

    #1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描写叙述 小Hi和小Ho是一对好朋友.出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮 ...

  2. Android倒计时CountDownTimer小记

    Android 超简便的倒计时实现:  CountDownTimer CountDownTimer由系统提供 查资料的时候 发现了CountDownTimer这个类之后 果断抛弃了曾经的倒计时做法 功 ...

  3. 使用Python操作Memcached

    1.安装 yum install memcached easy_install python-memcached 2.操作memcached import memcache mc = memcache ...

  4. 关于PHP中的opcode

    简介 1.当Zend engine解释器完成对脚本代码的分析后,便将它们生成可以直接运行的中间代码,也称为操作码(Operate Code,opcode),opcode是一个四元组,(opcode, ...

  5. MySQL5.7.18基于GTID的主从复制过程实现

    GTID是5.6时加入的,在5.7中被进一步完善,生产环境建议在5.7版本中使用.GTID全称为Global Transaction Identifiers,全局事务标识符.GTID的复制完全是基于事 ...

  6. InteliJ Idea通过maven创建webapp

    facet是IDE给工程添加的属性,在使用maven时一定不能使用facet 一.创建maven项目,选定webapp作为archtype,这样就会自动生成webapp目录 如果没有给maven设置代 ...

  7. php 回收周期(Collecting Cycles)

    http://docs.php.net/manual/zh/features.gc.collecting-cycles.php 传统上,像以前的 php 用到的引用计数内存机制,无法处理循环的引用内存 ...

  8. POJ 2965 The Pilots Brothers' refrigerator (DFS)

    The Pilots Brothers' refrigerator Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15136 ...

  9. android自定义控件实例

    很多时候android常用的控件不能满足我们的需求,那么我们就需要自定义一个控件了.今天做了一个自定义控件的实例,来分享下. 首先定义一个layout实现按钮内部布局: 01 <?xml ver ...

  10. Linux标识进程

    一.前言 其实两年前,本站已经有了一篇关于进程标识的文档,不过非常的简陋,而且代码是来自2.6内核.随着linux container.pid namespace等概念的引入,进程标识方面已经有了天翻 ...