CSS样式的注意点小结

1. CSS选择器原则： Right To Left

$("input.on")  //哪个选择更快？
$(".on");

目前CSS、跟jquery的选择器的原则都是“right to left”(因为两者的选择器引擎相同 都使用Sizzle)， 即选择元素是 从右向左匹配的（过滤不匹配的元素，而非 查找匹配的元素）。

如$("input.on") 中，选择器会先 匹配 .on的节点（即过滤掉非.on的叶子节点），再去向上匹配 input tag(过滤掉 非input的元素)。

因此，$(“.on”) 会比 $(“input.on”) 更快，

如果要匹配的class不存在其他tag的话，建议前面最好不要加tag恩。

测试结果如下：jsperf

参考：

  1. Writing Efficient CSS Universal_Rules
  2. Why do browsers match CSS selectors from right to left?
  3. 为什么排版引擎解析 CSS 选择器时一定要从右往左解析？

2. CSS position布局——从父规则

同级父节点z-index相同，则无论子元素z-index多大都没用。只遵循父节点的层级。

如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

<div id="a" style="position:relative;z-index:1;">
<div id="a-1">A-1</div>
</div>

<div id="b" style="position:relative;z-index:0;">
<div id="b-1">B-1</div>
</div>

如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.

<div id="a" style="position:relative;z-index:0;">
<div id="a-1" style="position:relative;z-index:2;">A-1</div>
</div>

<div id="b" style="position:relative;z-index:0;">
<div id="b-1" style="position:relative;z-index:1;">B-1</div>
</div>

很多人将 z-index 设得很大, 9999 什么的都出来了, 如果不考虑父节点的影响, 设得再大也没用, 那是无法逾越的层级.

范例： CSS z-index not working (position absolute)

<div class="absolute">
    <div id="relative"></div></div><div class="absolute" style="top: 54px"></div>
    <style>
            #relative {
                    position: relative;
                    width: 40px;
                    height: 100px;
                    background: #000;
                    z-index: 1;
                    margin-top: 30px;
            }
            .absolute {
                    position: absolute;
                    top: 0; left: 0;
                    width: 200px;
                    height: 50px;
                    background: yellow;
                    z-index: 0;
            }
    </style>

解决： 把父节点 absolute的 z-index去掉，按默认的来。

3. radio \ checkbox 自定义样式

目前很多浏览器默认的radio、checkbox按钮样式不同，为了更美观，很多选择了字体图标来做效果。

而很多人直接使用 javascript监听事件 + html class ，来控制样式的选中效果。

其实没有必要那么复杂。CSS3中新增:checked属性，即可解决。

例子如下：

html:

<input id="demo" type="checkbox" checked="checked">
<label for="demo" ><span class="hae-icon icon-radio-checked"></span>Selected Option</label>

css:

input[type=radio], input[type=checkbox] {
          display: none;
     }
input[type=radio] + label .icon-radio:before {
          content: "\e157"; }
input[type=radio]:checked + label .icon-radio:before {
          content: "\e165"; }

实现原理： 隐藏原有Input样式，直接用label 来代替 Input， 通过css checked属性，改变Label的样式。

4. 长链接换行问题

如果你遇到下述这种问题，如何解决长链接不换行呢？

long url

其实，你只需要在a标签中，添加以下CSS属性即可：

a {
  word-wrap: break-word;
}

效果如下：

break long url

有些人会建议用 word-break: break-all，但两者会有些区别：

word-break: break-all 会针对所有语言的文字，都会断行，W3C注明是针对CJK（中文、韩文、日文）做的， 如果你只想针对URL链接断行，word-wrap就够用了。