CSS学习之 选择器篇

1、书写规则

      CSS的一个核心特性就是能向文档中的一组元素类型应用某些规则。比如，想让<h1>元素的文本都显示为红色，可以这样写：

         h1 {color:red;}

2、声明

      声明的格式：一个属性后面跟一个冒号，再后面是一个或多个值（中间用空格分开），然后是一个分号。

3、分组

      假设希望h1、h2、p元素都有灰色文本。为达到这个目的，最容易的做法就是用以下声明：

          h1,h2,p {color:gray;}

4、通配符

      （＊）为通配符，表示可以与任何元素匹配。例如，要让一个文档中的每个元素都 为红色，书写规则如下：

          ＊ ｛color:red;｝

5、类选择器与ID选择器

      类选择器与ID选择器允许以一种独立于文档元素的方式来指定样式。这些选择器可以单独使用，也可以与其他元素选择器结合使用。

      类选择器

      要应用样式而不考虑具体涉及的元素，最常用的方法就是使用类选择器。为了将一个类选择器的样式与元素关联，必须将该元素的class属性指定为一个适当的值。书写规则如下：

       ＊.jiahei {font-weight:bold;}           //CSS样式表中的代码

        <p class=jiahei>字体加黑</p>    //网页中书写的代码

      ID选择器

      ID选择器类似于类选择器，不过也有一些重要的差别。一是ID选择器前面有一个＃号；二是ID选择器不引用class属性值，它引用id属性中的值。样式规则如下：

        ＃jiahei {font-weight:bold;}               //css样式表中的代码

         <p id=jiahei>字体加黑</p>             //网页中的代码

      类选择器与ID选择器到底选哪个呢？

     类选择器可以为任意多个元素指定类，ID选择器会使用一次，而且仅一次

6、属性选择器

     与类选择器和ID选择器不同，属性选择器可以根据元素的属性及属性值来选择元素。属性选择器可以分为四种：

     简单属性选择器

     如果希望选择有某个属性的元素，而不论该属性的值是什么，可以使用简单属性选择器。例如：想选择带 class属性的h1元素，可以写为：

         h1[class] {color:red;}

     根据具体属性值选择

     如果想只选择特定属性值的元素，如将所有指向http://www.homebai.com的链接变为粗体。可以写为：

         a[href="http://www.homebai.com"] {font-weight:bold;}

      根据部分属性值选择

      如果属性能接受列表（词之间用空格分开），可以根据其中的任意一个词进行选择。假设class属性中有个"menu item"列表，现在想匹配 class属性值为item的元素。可以按如下格式书写：

          p[class~="item"] {font-weight:bold;}

      "~"表示部分匹配，如果省略掉就表示需完全匹配。

     子串匹配属性选择器

类型	描述
foo^="bar"	选择foo属性值以"bar"开头的所有元素
foo$="bar"	选择foo属性值以"bar"结尾的所有元素
foo*="bar"	选择foo属性值中包含"bar“的所有元素

       特殊属性选择器

       例如：*[lang |="en"] {color:red;}

       这个规则会选择属性等于en或者以en开头的所有元素。