重走一边CSS（二）

常用的选择器

最常用的选择器类型是类型选择器（元素选择器）和后代选择器
- 类型选择器：用来寻找特定类型的元素
- 后代选择器：用于寻找特定元素或元素组的后代，由其他两个选择器之间的空格表示
ID选择器：用于寻找那些具有指定ID的元素
类选择器：用于寻找那些具有指定类名的元素
伪类选择器：有时候，我们需要根据文档结构之外的其他条件对元素应用样式，例如表格元素，链接的状态
- :link 和 :visited称为链接伪类，只能用于锚元素。:hover 、 :active 和 :focus成为动态伪类，理论上可以应用于任何元素。IE6只注意应用锚链接的:active 和 :hover 选择器，完全忽略:focus 。IE7在任何元素伤都支持:hover，但忽略:active 和 :focus.
- 通过把伪类元素连接在一起，可以创建更复杂的行为，比如在已访问链接和未访问链接上实现不同的鼠标悬停效果
  a:visited:hover{ color:oliver; }

通用选择器

通用选择器可能是所有选择器中最强大但最少使用的。有点类似与通配符，由一个星号表示。
为了省事，很多时候我也会直接* padding:0 ; margin:0; 看似省事，却导致解析的速度降低，css在加载时候需要将所有的标签（不管是否在页面中用到的一切标签）均初始化
示例：删除每个元素上默认的浏览器内边距和外边距:

* {
    padding: 0;
    margin: 0;
}

高级选择器

PS: 在对于站点功能或布局很重要的任何元素上，都应该避免使用这些高级选择器。
子选择器。后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。

<!DOCTYPE html>
<html>
<head>
    <title>CSS 子选择器测试</title>
    <style type="text/css">
        /* 子选择器 */
        #nav>li{
            background: url(coldplay.png) no-repeat left top;
            padding-left: 20px;
        }
        /* 后代选择器 */
        /*
        #nav li{
            background: url(coldplay.png) no-repeat left top;
            padding-left: 20px;
        }
        */
    </style>
</head>
<body>
    <ul id="nav">
        <li><a href="/home/">Home</a>></li>
        <li><a href="/service/">Services</a></li>
            <ul>
                <li><a href="/service/design/">Design</a></li>
                <li><a href="/service/development">Development</a></li>
                <li><a href="/service/consultancy">Consultancy</a></li>
            </ul>
        <li><a href="/contact/">Contact Us</a></li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>CSS 子选择器测试</title>
    <style type="text/css">
        /* 子选择器 */
        /*
        #nav>li{
            background: url(coldplay.png) no-repeat left top;
            padding-left: 20px;
        }
        */
        /* 后代选择器 */
        /*
        #nav li{
            background: url(coldplay.png) no-repeat left top;
            padding-left: 20px;
        }
        */
        /* IE7和高版本都支持子选择器，在IE6和更低版本中，可以使用通用选择器模拟子选择器效果*/
        #nav li {
            background: url(coldplay.png) no-repeat left top;
            padding-left: 20px;
        }
        #nav li * {
            background-image: none;
            padding-left: 0;
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li><a href="/home/">Home</a>></li>
        <li><a href="/service/">Services</a></li>
            <ul>
                <li><a href="/service/design/">Design</a></li>
                <li><a href="/service/development">Development</a></li>
                <li><a href="/service/consultancy">Consultancy</a></li>
            </ul>
        <li><a href="/contact/">Contact Us</a></li>
    </ul>
</body>
</html>

相邻同胞选择器用于定位同一个父元素下某个元素之后的元素，即根据一个元素与另一个元素的相邻关系对它应用样式

<!DOCTYPE html>
<html>
<head>
    <title>CSS 相邻同胞选择器测试</title>
    <style type="text/css">
        h2 + p {
            font-size:1.4em;
            font-weight: bold;
            color:#777;
        }
    </style>
</head>
<body>
    <h2>标题1</h2>
    <p>标题2</p>
    <p>标题3</p>
</body>
</html>

新的CSS3选择器

属性选择器：可以根据某个属性是否存在或属性的值来寻找元素
除了可以根据某个属性是否存在对元素应用样式之外，还可以根据属性值应用样式
- a[rel=”nofollow”] {
  background: url(nofollow.gif) no-repeat right center;
  padding-left: 20px;
  }

<!DOCTYPE html>
<html>
<head>
    <title>CSS 属性选择器测试</title>
    <style type="text/css">
        acronym[title] {
            border-bottom: 1px dotted #999;
        }
        acronym[title]:hover,acronym[title]:focus {
            cursor: help;
        }
    </style>
</head>
<body>
    <p>The term <acronym title="self-contained">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as a word.</p>
</body>
</html>

特殊性和层叠的作用

在不太复杂的样式表中，要寻找同一元素可能有两个或更多规则。CSS通过层叠的过程处理这种冲突。层叠给每个规则分配一个重要度
为了计算规则的特殊性，给每种选择器都分配一个数字值。然后将规则的每个选择器的值加在一起，计算出规则的特殊性。可惜特殊性的计算不是以10为基数的，而是采用一个更高的未指定的基数。真能确保非常特殊的选择器（比如ID选择器）不会被大量一般选择器（比如类型选择器）所超越。
- 选择器的特殊性分成4个成分等级：a,b,c和d
- 如果样式是行内样式，那么a = 1
- b 等于ID选择器的种数
- c 等于类，伪类和属性选择器的数量
- d 等于类型选择器和伪元素选择器的数量

计划和维护样式表

css文件个数越大加载速度越慢，css个数越多加载速度越慢，因此需要平衡css文件的数量和大小
为了避免混乱，应尽量保持一般样式非常一般，特殊样式尽可能特殊，这样就不需要覆盖特殊样式了。如果发现不得不多次覆盖一般样式，那么从更一般的样式中删除将需要覆盖的声明，并且将它显式的应用于需要它的每个元素
对文档应用样式
- 可以将样式放在style标签之间，从而直接在文档头上添加样式
- 外部样式表附加到网页上
  - 链接
    <link href="/css/basic.css" rel="stylesheet" type="text/css" />
  - 导入（导入样式表比链接样式表混乱）
    <style type="text/css"> @import url("/css/basic.css"); </style>

如何在代码中加注释

CSS注释以(/* … */)结束,这种注释称为C风格的注释
为了便于维护，最好把样式表划分为几大块。通常把最一般的规则放在最前面。包括应用于body标记的，应该由站点上所有元素继承的样式。完成一般样式后，开始处理更特殊的样式和辅助样式，然后处理布局和导航等结构性元素，与特定页面相关的组件上，最后在文档的底部处理覆盖和例外情况。

重走一边CSS（二）

常用的选择器

通用选择器

高级选择器

新的CSS3选择器

特殊性和层叠的作用

计划和维护样式表

如何在代码中加注释

猜你喜欢