codecamp

选择器

Table of Contents generated with DocToc

  • 选择器

    选择器

    选择器可被看做表达式,通过它可以选择相应的元素并应用不同的样式。

    • 简单选择器
    • 元素选择器
    • 组合选择器

    简单选择器

    简单选择器可组合使用。

    标签选择器

    <div>
      <p>Sample Paragraph</p>
      <p>Sample Paragraph</p>
      <p>Sample Paragraph</p>
    </div>
    
    <style type="text/css">
      p {
        color: blue;
      }
    </style>
    

    类选择器

    .className 以 . 开头,名称可包含字母,数字,-_,但必须以字母开头。它区分大小写并可出现多次。

    <div>
      <p>Sample Paragraph</p>
      <p class="special bold">Sample Paragraph</p>
      <p>Sample Paragraph</p>
    </div>
    
    <style type="text/css">
      p {
        color: blue
      }
      .special {
        color: orange;
      }
      .bold {
        font-weight: bold;
      }
    </style>
    

    id 选择器

    #idName 以 # 开头且只可出现一次,其命名要求于 .className 相同。

    <div>
      <p id="special">Sample Paragraph</p>
    </div>
    
    <style type="text/css">
      #special {
        color: red;
      }
    </style>
    

    通配符选择器

    <div>
      <p>Sample Paragraph</p>
      <p>Sample Paragraph</p>
    </div>
    
    <style type="text/css">
      * {
        color: blue;
      }
    </style>
    

    属性选择器

    [attr] 或 [attr=val] 来选择相应的元素。#nav{...} 既等同于 [id=nav]{...}。IE7+

    [attr~=val] 可选用与选择包含 val 属性值的元素,像class="title sports" 与 class="sports".sports{...} 既等同于 [class~=sports]{...} IE7+

    [attr|=val] 可以选择val开头及开头紧接-的属性值。IE7+

    [attr^=val] 可选择以val开头的属性值对应的元素,如果值为符号或空格则需要使用引号 ""。IE7+

    [attr$=val] 可选择以val结尾的属性值对应的元素。IE7+

    [attr*=val] 可选择以包含val属性值对应的元素。IE7+

    <div>
      <form action="">
        <input type="text" value="Xinyang" disabled>
        <input type="password" placeholder="Password">
        <input type="button" value="Button">
      </form>
    </div>
    <style type="text/css">
      [disabled] {
        background-color: orange;
      }
      [type=button] {
        color: blue;
      }
    </style>
    

    伪类选择器

    常用伪类选择器:

    • :link IE6+
    • :visited IE7+
    • :hover IE6中仅可用于链接
    • :active IE6/7中仅可用于链接
    • :enabled IE9+
    • :disabled IE9+
    • :checked IE9+
    • :first-child IE8+
    • :last-child IE9+
    • :nth-child(even) 可为 odd even 或数字 IE9+
    • :nth-last-child(n) n从 0 开始计算 IE9+
    • :only-child 仅选择唯一的元素 IE9+
    • :only-of-type IE9+
    • :first-of-type IE9+
    • :last-of-type IE9+
    • :nth-of-type(even) IE9+
    • :nth-last-of-type(2n) IE9+

    不常用伪类选择器:

    • :empty 选中页面中无子元素的标签 IE9+
    • :root 选择 HTML 根标签 IE9+
    • :not() 参数为一般选择器 IE9+
    • :target 被锚点选中的目标元素 IE9+
    • :lang() 选中语言值为某类特殊值的元素 IE7+

    NOTE:element:nth-of-type(n) 指父元素下第 n 个 element 元素,element:nth-child(n) 指父元素下第 n 个元素且元素为 element,若不是,选择失败。具体细节请在使用时查找文档。

    <div>
      <a href="http://sample-site.com" title="Sample Site">Sample Site</a>
    </div>
    <style type="text/css">
      /* 伪类属性定义有顺序要求! */
      a:link {
        color: gray;
      }
      a:visited {
        color:red;
      }
      a:hover {
        color: green;
        /* 鼠标悬停 */
      }
      a:active {
        color: orange;
        /* 鼠标点击 */
      }
    </style>
    

    其他选择器

    伪元素选择器

    注意与伪类学则器的区分。

    • ::first-letter IE6+
    • ::first-line IE6+
    • ::before{content: "before"} 需与 content 一同使用 IE8+
    • ::after{content: "after"} 需与 content 一同使用 IE8+
    • ::selection 被用户选中的内容(鼠标选择高亮属性)IE9+ Firefox需用 -moz 前缀

    组合选择器

    • 后代选择器 .main h2 {...},使用 表示 IE6+
    • 子选择器 .main>h2 {...},使用>表示 IE7+
    • 兄弟选择器 h2+p {...},使用+表示 IE7+
      • h2~p {...},使用~表示(此标签无需紧邻)IE7+
  • 选择器分组

    <style type="text/css">
    /* 下面两组样式声明效果一致 */
    h1 {color: red;}
    h2 {color: red;}
    h3 {color: red;}
    
    h1, h2, h3 {color: red;}
    </style>
    

    继承、优先、层级

    继承

    子元素继承父元素的样式,但并不是所有属性都是默认继承的。通过文档中的 inherited: yes 来判断属性是否可以自动继承。

    自动继承属性:

    • color
    • font
    • text-align
    • list-style
    • ...

    非继承属性:

    • background
    • border
    • position
    • ...

    优先

    CSS Specificity Calculator 可以在这里找到。更多关于 CSS 优先级别的信息可以在这里找到(英文)。

    计算方法:

    • a = 行内样式
    • b = id 选择器的数量
    • c = 类、伪类的属性选择器的数量
    • d = 标签选择器和伪元素选择器的数量

    NOTE:从上到下优先级一次降低,且优先级高的样式会将优先级低的样式覆盖。大致公式(并不准确)如下。

    value = a * 1000 + b * 100 + c * 10 + d
    

    改变优先级

    • 改变样式声明先后顺序
    • 提升选择器优先级
    • !important(慎用)

    层叠

    层叠为相同属性根据优先级覆盖,如优先级相同则后面会覆盖前面的属性,而不同属性则会合并。


    语法
    文本
    温馨提示
    下载编程狮App,免费阅读超1000+编程语言教程
    取消
    确定
    目录

    书单

    关闭

    MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }