小记：css特殊性

今天早上遇到了个小bug，刚好用从css权威指南学到的知识解决了

html结构

<ul class="portlet-nav">

        <li><a id="portlet-1">Tab 1</a></li>

        <li><a id="portlet-2">Tab 2</a></li>

        <li><a id="portlet-3">Tab 3</a></li>

</ul>

css样式

.portlet-nav a {

        color: #fff;

        text-decoration: none;

        display: block;

        padding: 7px 10px 9px 10px;

        margin-top: 4px;

        margin-left: 1px;

        background-color: #8e44ad;

}

.portlet-nav a:hover {

        color: #000;

        background-color: #fff;

        cursor: pointer;

 }

效果就是这样

没错，就是一个简单的tab切换而已

那么此处遇到的问题是这样的

我希望点击相应的tab时就选中这个tab，同时高亮，所以

target.className="portlet-active";

对应的css代码

.portlet-active{

        color:#000;

        background-color: #fff;

        cursor: auto;

 }

然而，当我实际操作的时候，发现样式并没生效，明明class已经加上去了

突然想起早两天看的权威指南，此处css样式上a的定义是这样的

.portlet-nav a

所以a对应的特殊性是 0 0 1 1

而我们新增的css样式active则是

.portlet-active

它的特殊性则是 0 0 1 0

所以相比之下，它的特殊性拼不过a原本的样式，根据层叠，所以即使加了active这个class，最终显示的样式还是原本的样式，所以，为了此处的正确显示，我们的active应该这样写

.portlet-nav .portlet-active

这样它的特殊性就变成了 0 0 2 0，问题得以解决。

小记：css特殊性的更多相关文章

CSS 特殊性、继承与层叠
一.特殊性规则选择器的特殊性由选择器本身的组件确定:特殊性由四个部分组成,其初始值为0,0,0,0. 1. 对于选择器中的每一个id,记0,1,0,0: 2. 对于选择器中的每一个类.伪 ...
CSS特殊性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS特殊性
样式的优先级取决于特殊性,特殊性为0,0,0,0 Ø每个元素或伪元素选择器贡献特殊性为 0,0,0,1 Ø每个类.伪类或者属性选择器的特殊性为 0,0,1,0 Ø每个ID选择器的特殊性为 0,1,0, ...
小记css的margin collapsing
近期在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录 ...
记录：CSS特殊性——权值规则
浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:r ...
CSS选择器的特殊性和LOVE HA
在CSS中当几个相同的选择器对同一个元素有不同的规则时,该怎么应用这些规则呢? 答案就是:CSS特殊性(CSS specificity) 选择器特殊性有选择器本身组成,特殊性由4个数值表述:0, 0, ...
CSS Specificity(特殊性)
CSS的特殊性是非常重要却又经常被忽视的属性,特别是在团队合作下的产品迭代开发中,因为不注重CSS的特殊性最后导致某些代码混乱不堪,这里就把自己对CSS特殊性的认识做一些归纳总结. CSS的特殊性(s ...
CSS基础(02)
CSS 选择器 1.CSS3 选择器简介在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 语法: 下面中"CSS" 列指示该属性是在哪个 CSS 版本中定义的.(C ...
CSS 高级
1.CSS 盒模型(Box Model) 所有 HTML 元素都可以看作是盒子,在 CSS 中,“Box Model”这一术语主要是在布局时使用. CSS 盒模型(Box Model)规定了处理元素内 ...

随机推荐

支付宝web支付
过程 1. 用户下单 2. 商户后台产生订单 3. 请求支付宝web支付页面(将订单信息返回给用户---放在form里面---隐藏起来-----并通过脚本自动提交此form到支付宝web支付页) 4. ...
JS刷新父窗口的几种方式<转>
常用的有: window.opener.location.reload(); 和 window.location.reload(); 浮层内嵌iframe及frame集合窗口,刷新父页面的 ...
解决mac升级后，出现的 xcrun: error: invalid active developer path, missing xcrun 错误
最近升级了mac系统,然后接着写代码就出问题了. 报错信息如下: xcrun: error: invalid active developer path (/Library/Developer/Com ...
vuejs全局api
全局api set 增加数组 vm.$set 实例化方法全局api delete 删除数组 vm.$delete 实例化方法全局 api 组件component 实例化方法 components ...
LazyLoad.js及scrollLoading.js
http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加 ...
【转】java开源类库pinyin4j的使用
最近CMS系统为了增加查询的匹配率,需要增加拼音检索字段,在网上找到了pinyin4j的java开源类库,提供中文转汉语拼音(并且支持多音字), 呵呵,看了看他的demo,决定就用它了,因为我在实际使 ...
iOS 之美：iOS Delegate 使用五步曲
在iOS 开发中, 搞清楚Delegate 是需要花些时间的. Delegate 本来是软件架构设计的一种理念.对于像手机这样一个有限的设备,我们需要充分考虑到:内存要尽量省着用: 视图之间的关系要清 ...
ARCGIS 点抽稀的实现
点抽稀是制图综合的一部分,即在点数据点特别密集是,需要选取比较重要的点而舍去不要重的点,使得图面整洁. 一.基本原理先把所有的点符号都设成透明.这样显示是没有点的.然后给这些点设置标注.标注方法很奇 ...
C++ Primer笔记10_运算符重载_赋值运算符_进入/输出操作符
1.颂值运营商首先来福值运算符引入后面要说的运算符重载.上一节说了构造函数.拷贝构造函数:一个类要想进行更好的控制.须要定义自己的构造函数.拷贝构造函数.析构函数.当然,还有赋值运算符.常说的三大函 ...
jqGrid 常用总结 -2
这次的总结是针对于一次bug,先说下我们遇到的问题,就是后台人员告诉我们添加数据到100条数据的时候,101条就看不到,当时我觉得就是没有分页的原因,所以我就以为在jqgrid中设置一个loadonc ...