重走一边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: 在对于站点功能或布局很重要的任何元素上,都应该避免使用这些高级选择器。
  • 子选择器。后代选择器选择一个元素的所有后代,而子选择器只选择元素的直接后代,即子元素。

<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/">Homea>>li>
        <li><a href="/service/">Servicesa>li>
            <ul>
                <li><a href="/service/design/">Designa>li>
                <li><a href="/service/development">Developmenta>li>
                <li><a href="/service/consultancy">Consultancya>li>
            ul>
        <li><a href="/contact/">Contact Usa>li>
    ul>
body>
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/">Homea>>li>
        <li><a href="/service/">Servicesa>li>
            <ul>
                <li><a href="/service/design/">Designa>li>
                <li><a href="/service/development">Developmenta>li>
                <li><a href="/service/consultancy">Consultancya>li>
            ul>
        <li><a href="/contact/">Contact Usa>li>
    ul>
body>
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>标题1h2>
    <p>标题2p>
    <p>标题3p>
body>
html>

新的CSS3选择器

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

<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">SCUBAacronym> 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(二)_第1张图片

计划和维护样式表

  • css文件个数越大加载速度越慢,css个数越多加载速度越慢,因此需要平衡css文件的数量和大小
  • 为了避免混乱,应尽量保持一般样式非常一般,特殊样式尽可能特殊,这样就不需要覆盖特殊样式了。如果发现不得不多次覆盖一般样式,那么从更一般的样式中删除将需要覆盖的声明,并且将它显式的应用于需要它的每个元素
  • 对文档应用样式
    • 可以将样式放在style标签之间,从而直接在文档头上添加样式
    • 外部样式表附加到网页上
      • 链接


      • 导入 (导入样式表比链接样式表混乱)


如何在代码中加注释

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

你可能感兴趣的:(css)