ID、Class和标签选择器优先级
按一般论:
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和标签选择器优先级的更多相关文章
- css基础 引用方式 标签选择器 优先级 各式布局
今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...
- CSS选择器优先级
1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序 例如: .a{ color:red } .b{ color:green } 由于b晚于a定义,所以b覆盖a,反 ...
- day48 前端高级选择器优先级
复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...
- 我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级
首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style t ...
- CSS中选择器优先级与!important权重使用
CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- jquery基本选择器:id选择器、class选择器、标签选择器、通配符选择器
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本选择器 jquery基本选择器,包括id选择器.class选择器.标签选择器.通配符选择器,同时配合选择器的空格 ...
- jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换
首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
随机推荐
- MySQL必知必会笔记(六)存储过程 游标 触发器
留印:http://blog.sina.com.cn/s/articlelist_1254871964_5_1.html 第二十三章 使用存储过程 MySQL5 中添加了存储过程的支持. ...
- Oracle-client支持exp|imp|rman
官方精简版的驱动,不支持持exp/imp/rman,故需要安装oracle_client客户端. 实验环境: Centos6.5 x64 Oracle 11.2.0.4.0 Oracle_clie ...
- java中写sql语句的小小细节
来源于:http://www.cnblogs.com/reine98/p/6180472.html 看如下一条sql语句 1 2 3 4 5 6 String sql="SELECT * F ...
- 使用 Feed43
1.打开 Feed43 2.将标题.链接,时间等变化的字段删去用 {%} 代替.将固定且多余的字段删去用 {*} 代替.注意,源码中有换行的地方均需要添加{*} . 3.活学活用
- 深入PHP内核之函数和返回值
1.关于返回值,PHP内核中使用了大量的宏来实现,我们先看一个函数 PHP_FUNCTION 宏的定义(Zend/zend_API.h) #define PHP_FUNCTION ZEND_FUNC ...
- HDUOJ---1195Open the Lock
Open the Lock Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- 从零开始的 Python 爬虫速成指南
序 本文主要内容:以最短的时间写一个最简单的爬虫,可以抓取论坛的帖子标题和帖子内容. 本文受众:没写过爬虫的萌新. 入门 0.准备工作 需要准备的东西: Python.scrapy.一个IDE或者随便 ...
- php计算经纬度间的距离
<?php //根据经纬度计算距离 function getdistance($lng1,$lat1,$lng2,$lat2) { //将角度转为狐度 $radLat1=deg2rad($lat ...
- Android学习系列(19)--App离线下载
宜未雨而绸缪,毋临渴而掘井.----朱用纯<治家格言> 离线下载,在有网络的情况下下载服务器数据,以便无网络时也能阅读,就是离线阅读. 离线下载的功能点如下: ...
- 解决spring el表达式不起作用
el表达式不起作用,如下图所示 现象: 在显示页面中加入: <%@ page isELIgnored="false" %>就OK了 参考:http://bbs.csdn ...