选择符

CSS语法结构由三部分组成:选择符(Selector),属性(property)和值(value).

使用方法:  Selector  { Property: value}

类型选择符

所谓类型选择符,是指网页中已有的标签类型作为名称的选择符

例如：body， div， span等 

全局选择符

CSS全局选择符 -- 匹配文档中的任意一个元素

*
{
    color: pink;
    font-size: 12px;
    border: 1px solid blue;
}

统一定义页面的所有元素

群组选择符

除了可以对单个对象进行样式指定,还可以对一组对象进行相同的样式指派.只需要使用逗号对选择符进行分隔

例如：h1,h2,h3,span { font-family:宋体 }

包含选择符

当我们仅仅想对某一个对象中的子对象进行样式指定时,包含选择符就被派上了用场.包含选择符组合中前一个对象包含后一个对象,对象之间使用空格作为分隔符.

例如：h1 span{ font-weight:bold }

子对象选择符

包含选择符比子选择符范围更广，因包含关系中一个元素可以是另外一个元素的"儿子"、"孙子"、"从孙子"，而子对象选择符中的一个元素只能是另外一个元素的"儿子"，"孙子"或"从孙子"不行

例如

p > code
{
    color:blue;
    font-size:120%;
}

<p>
        <code>梦之都CSS子对象选择符可用，蓝色</code>
</p>

上面的例子可以显示p > code定义的样式.

<p>
        <span><code>梦之都CSS子对象选择符不可用</code></span>
</p>

上面的例子不能显示p > code定义的样式,因为p与code不是直接包含关系，是间接包含关系（code是p的"孙子"）

直接相邻选择符

h1 + p
{
    color:red;
}

上面例子定义了直接相邻选择符

<h1>梦之都CSS 直接相邻选择符</h1>
<p>
        使用了样式
</p>

由于p和h1是直接的邻居,所以p段落中的内容可以显示红色样式

普通相邻选择符

匹配文档中符合选择符规定的普通相邻关系的元素，例如E ~ F选择符，E和F在文档被相同的元素包含（具有相同的父元素）且文档中F在E后出现（无需紧随其后），则选择符匹配元素F

span ~ p
{
    color:red;
}

id选择符

每个id都是唯一的，不允许重复。因此一个ID选择符在一个HTML文档中只可使用一次

css中的格式：#id名{样式}   

class选择符

类选择符可以包括HTML文档中不同类型的一些元素（就像一种分类），因此一个类选择符在一个HTML文档中可使用多次

css中的格式是：.class名{样式}

组合选择符

对于以上所有css选择符,均可以进行组合使用  

如:  .p1,#content,h1 .p2{ color:red }         表示class为p1,id为content,以及类型选择符h1标签下的所有class为p2的标签内字体的颜色为红色

伪类

CSS中样式和HTML文档中元素的连接通常基于元素在文档中的位置，这种方式满足于大部分需求。不过由于HTML文档结构的限制，一些效果无法实现，例如，某些用户行为引发的事件，下面是一些示例：

• 当用户鼠标移动到某个HTML元素上
• 离开HTML元素
• 点击HTML元素

伪类是一种特殊的类,它由CSS自动支持,属CSS的一种扩展类,名称不能被用户自定义,使用时只能够按标准格式进行应用

例如：

a: hover {

              background-color:#000;

   }

属性名选择符

 [att] -- CSS属性名选择符，匹配文档中具有att属性的E元素

a[title]
{
    color:red;
    border: 1px solid blue;
}

所有具有title属性的a标签将显示红色的文字，并显示蓝色边框

属性值选择符[att=val]

[att=val] -- CSS E[att=val] 属性值选择符，匹配文档中具有att属性且其值为val的E元素

a[title="fwj"]
{
    color:red;
}

所有title值为fwj的a标签的文字颜色将显示红色

属性值选择符也可以匹配多个属性

*[title="fwj"][href="http://www.baidu.com/"]
{
    color: pink;
    border: 1px solid blue;
}

只有title为fwj和href为http://www.baidu.com/的标签，文字才显示粉色

 属性值选择符E[att~=val]

E[att~=val] -- CSS E[att~=val] 属性值选择符，匹配文档中具有att属性且其中一个值（多个值使用空格分隔）为val(val不能包含空格)的E元素

a[title~="baidu"]
{
    color:red;
}

<a href="http://www.baidu.com/" title="www baidu com">红色</a>

title属性包含三个值（多个值使用空格分隔），其中一个为baidu，因此可匹配样式

 属性值选择符 E[att|=val]

 E[att|=val] -- CSS E[att|=val] 属性值选择符，匹配文档中具有att属性且其中一个值为val，或者以val开头紧随其后的是连字符-的E元素（主要用来允许语言编码的匹配，例如HTML中的hreflang属性。关于lang（或 xml:lang）语言码的匹配，可查看:lang伪类）

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

*[lang|="zh"]
{
    color: blue;
}

<p lang="en">梦之都红色</p>
<p lang="en-US">梦之都红色</p>
<p lang="zh">梦之都蓝色</p>

属性值子串选择符E[att^=val]

E[att^=val] -- CSS E[att^=val]属性值子串选择符，匹配文档中具有att属性且其值的前缀为val的E元素

a[href^="mailto"] 
{
    color: green;
    background: url(/images/css/icon-mail.png) center right no-repeat;
}

a[href^="https://"]
{
    color:red;
    background: url(/images/css/icon-ssl.png) center right no-repeat;
}

a[href^="ftp://"]
{
    color:gold;
    background: url(/images/css/icon-file.png) center right no-repeat;
}

上面示例根据不同的链接协议匹配不同的样式图片

 属性值子串选择符E[att$=val]

E[att$=val] -- CSS E[att$=val] 属性值子串选择符，匹配文档中具有att属性且其值的后缀为val的E元素

a[href$=".html"]
{
    color:red;
}

a[href$=".php"]
{
    color:green;
}

a[href$=".jsp"]
{
    color:blue;
}

为不同的链接文件匹配不同的样式

属性值子串选择符E[att*=val]

E[att*=val] -- CSS E[att*=val] 属性值子串选择符，匹配文档中具有att属性且其包含val的E元素

a[href*=".html"]
{
    color:red;
}

a[href*=".php"]
{
    color:green;
}

a[href*=".jsp"]
{
    color:blue;
}

<a href="http://www.baidu.com/css.html?id=1&name=www">红色字体</a>
<a href="http://www.baidu.com/css.php?id=2&name=dreamdu">绿色字体</a>
<a href="http://www.baidu.com/css.jsp?id=3&name=com">蓝色字体</a>

由于多数动态网页的网址后都有参数，因此可以使用[att*=val]匹配动态网页的样式