CSS选择器的基本样式

一、CSS样式表

       作用是什么：设定如何显示 HTML 标签。

       语法结构是什么：

              第一种：

选择器 {        declaration1;        declaration2;     … }

              说明： 这种方式的CSS样式表由选择器以及一条或多条声明两个部分组成；该种样式表只能定义在style标签或css文件中，每个style标签或css文件可定义多个CSS样式表；

              第二种：

style= " declaration1; declaration2;…"

              说明： 这种方式的CSS样式表只由一条或多条声明组成；该种样式表只能定义在style标签属性；HTML文档中每个标签都有一个style标签属性。

              无论使用哪一种方式定义CSS样式表，样式表中的declaration都由一个样式属性（非标签属性，即样式属性不能当标签属性直接用在标签中）和一个样式属性值组成，样式属性和样式属性值使用冒号分开；声明之间使用分号间隔；

              注意：

                     1、如果一个样式属性有多个样式属性值，则样式属性值之间使用逗号间隔；

                     2、在CSS中样式属性及其样式属性值对大小写不敏感，且不忽略空格；

                     3、如果属性值由多个单词组成，则建议使用单引号引起来；

二、选择器

1、标签选择器

标签选择器以HTML文档中定义的标签名为选择器名，例如：

a{

height:10px;

weith:10px;

background-color:red;

}

上面这个例子是为a标签使用的选择器。

2、类选择器

类选择器以标签中class标签属性的属性值为选择器名，其语法如下：

. class标签属性的属性值 {        declaration1;        declaration2;     … }

              作用对象： class标签属性的属性值与类选择器.后相同的所有标签都受影响。

              注意：class标签属性的属性值不能以数字开头；

类选择器可以有多个值，每个值之间用空格间隔。

例如：

 .srrows{
            position: absolute; 
            top: 7px;
            left: 55px;
            height: 10px;
            width: 124px;
            background-position: 0 -100px;
            background: url(img/jd-first.png) no-repeat;
        }

定义了一个名为srrows的类选择器。

3、id选择器

              id选择器以标签中id标签属性的属性值为选择器名，其语法如下：

# id标签属性的属性值{        declaration1;        declaration2;     … }

              作用对象：只有id标签属性的属性值与id选择器#后相同的标签才受影响。

              注意：

                     1、id标签属性的属性值不能以数字开头；

                     2、id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；

4、后代选择器

              其语法如下:

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {        declaration1;        declaration2;     … }

    注意：选择器之间用空格间隔；

例如如下写的一个后代选择器实例：

#header #logo{
            width: 160px;
            height: 50px;
            background: url(img/jd.png) repeat-x;
            float: left;
            margin-top: 24px;
        }
也可以混合使用，如：

#container #container-on .step-index{
            color: #ccc;
            margin: 0 auto;
            display: block;
            width: 24px;
            height: 24px;
            font-size: 12px;
        }

id选择器和类选择器组合的后代选择器。

5、分组选择器

              如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器抽取出来以简化CSS样式代码，   该类选择器的选择器名由多个选择器组成，使用逗号分隔，在其语法如下

选择器1,选择器2,选择器3…{        declaration1;        declaration2;     … }

 6、通配符选择器

              通配符选择器等价于列出了HTML文档中所有标签的一个分组选择器，其语法如下

*{        declaration1;        declaration2;     … }

例如：几乎每一个网页页面都会使用的选择器通配符如下：

*{
            margin: 0px;
            padding: 0px;
        }