今天早上遇到了个小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特殊性的更多相关文章

  1. CSS 特殊性、继承与层叠

    一.特殊性规则 选择器的特殊性由选择器本身的组件确定:特殊性由四个部分组成,其初始值为0,0,0,0. 1.    对于选择器中的每一个id,记0,1,0,0: 2.    对于选择器中的每一个类.伪 ...

  2. CSS特殊性值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS特殊性

    样式的优先级取决于特殊性,特殊性为0,0,0,0 Ø每个元素或伪元素选择器贡献特殊性为 0,0,0,1 Ø每个类.伪类或者属性选择器的特殊性为 0,0,1,0 Ø每个ID选择器的特殊性为 0,1,0, ...

  4. 小记css的margin collapsing

    近期在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录 ...

  5. 记录:CSS特殊性——权值规则

    浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:r ...

  6. CSS选择器的特殊性和LOVE HA

    在CSS中当几个相同的选择器对同一个元素有不同的规则时,该怎么应用这些规则呢? 答案就是:CSS特殊性(CSS specificity) 选择器特殊性有选择器本身组成,特殊性由4个数值表述:0, 0, ...

  7. CSS Specificity(特殊性)

    CSS的特殊性是非常重要却又经常被忽视的属性,特别是在团队合作下的产品迭代开发中,因为不注重CSS的特殊性最后导致某些代码混乱不堪,这里就把自己对CSS特殊性的认识做一些归纳总结. CSS的特殊性(s ...

  8. CSS基础(02)

    CSS 选择器 1.CSS3 选择器简介 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 语法: 下面中"CSS" 列指示该属性是在哪个 CSS 版本中定义的.(C ...

  9. CSS 高级

    1.CSS 盒模型(Box Model) 所有 HTML 元素都可以看作是盒子,在 CSS 中,“Box Model”这一术语主要是在布局时使用. CSS 盒模型(Box Model)规定了处理元素内 ...

随机推荐

  1. 支付宝web支付

    过程 1. 用户下单 2. 商户后台产生订单 3. 请求支付宝web支付页面(将订单信息返回给用户---放在form里面---隐藏起来-----并通过脚本自动提交此form到支付宝web支付页) 4. ...

  2. JS刷新父窗口的几种方式&lt;转&gt;

    常用的有:   window.opener.location.reload();    和  window.location.reload(); 浮层内嵌iframe及frame集合窗口,刷新父页面的 ...

  3. 解决mac升级后,出现的 xcrun: error: invalid active developer path, missing xcrun 错误

    最近升级了mac系统,然后接着写代码就出问题了. 报错信息如下: xcrun: error: invalid active developer path (/Library/Developer/Com ...

  4. vuejs全局api

    全局api set 增加数组 vm.$set 实例化方法 全局api delete 删除数组 vm.$delete 实例化方法 全局 api 组件component 实例化方法 components ...

  5. LazyLoad.js及scrollLoading.js

    http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加 ...

  6. 【转】java开源类库pinyin4j的使用

    最近CMS系统为了增加查询的匹配率,需要增加拼音检索字段,在网上找到了pinyin4j的java开源类库,提供中文转汉语拼音(并且支持多音字), 呵呵,看了看他的demo,决定就用它了,因为我在实际使 ...

  7. iOS 之美:iOS Delegate 使用五步曲

    在iOS 开发中, 搞清楚Delegate 是需要花些时间的. Delegate 本来是软件架构设计的一种理念.对于像手机这样一个有限的设备,我们需要充分考虑到:内存要尽量省着用: 视图之间的关系要清 ...

  8. ARCGIS 点抽稀的实现

    点抽稀是制图综合的一部分,即在点数据点特别密集是,需要选取比较重要的点而舍去不要重的点,使得图面整洁. 一.基本原理 先把所有的点符号都设成透明.这样显示是没有点的.然后给这些点设置标注.标注方法很奇 ...

  9. C++ Primer笔记10_运算符重载_赋值运算符_进入/输出操作符

    1.颂值运营商 首先来福值运算符引入后面要说的运算符重载.上一节说了构造函数.拷贝构造函数:一个类要想进行更好的控制.须要定义自己的构造函数.拷贝构造函数.析构函数.当然,还有赋值运算符.常说的三大函 ...

  10. jqGrid 常用 总结 -2

    这次的总结是针对于一次bug,先说下我们遇到的问题,就是后台人员告诉我们添加数据到100条数据的时候,101条就看不到,当时我觉得就是没有分页的原因,所以我就以为在jqgrid中设置一个loadonc ...