1.1.1 ID选择器

1、 id选择器以#开头

2、 id选择器只能供一个元素使用

1.1.2 类样式（class样式）

1、 以点（.）开头

2、 可以供多个元素使用

1.1.3 标签选择器

通过标签来选择元素

1.1.4 通配选择器

通过星号（*）来表示所有标签，对所有标签添加样式

1.1.5 组合选择器

如果有多个选择器的样式是一样的，我们可以将这些选择器组合起来一起写。

<style type="text/css">

/*组合选择器*/

div,span{

        color:#F00;

}

#first,h1{

        color:#060;

}

</style>

<div>锄禾日当午，</div>

<p id="first">汗滴禾下土。</p>

<span>谁知盘中餐，</span>

<h1>粒粒皆辛苦。</h1>

1.1.6 后代选择器

1.1.7 子元素选择器（父元素>子元素）

1.1.8 相邻元素选择器

#first+div：紧挨着#first之后的div

#first~div：#first之后的所有的div

1.1.9 伪类

元素:link                正常连接时候的状态

元素:visited        点击以后的状态

元素:hover        当鼠标移动上去的状态

元素:active        当鼠标按下去时候的状态

脚下留心：不是所有的元素都支持这4个状态，有的元素可能只支持其中的某个状态。但是超链接支持这4种状态。

脚下留心：这四种状态要按照lvha的顺序写。（love 爱 hate 恨）

<style type="text/css">

a:link{        /*正常连接时候的状态*/

        color:#F00;

        text-decoration:none;   /*文本修饰*/

        font-size:12px;

}

a:visited{        /*点击后的状态*/

        color:#F0F;

        text-decoration:none;

        font-size:12px;

}

a:hover{        /*当鼠标移动到a标记的时候状态*/

        color:#060;

        text-decoration:underline;

        font-size:24px;

}

a:active{  /*当鼠标点击下去的状态*/

        color:#00F;

        text-decoration:underline;

        font-size:24px;

}

</style>

<a href="#">超链接1</a> <br>

<a href="#">超链接2</a>

例题一

例题二：

1.1.10 伪类选择器与类选择器一起使用

思考一个场景：如何实现一个页面中有两种超链接的样式。

<style type="text/css">

a.first:link{

        color:#F00;

        text-decoration:none;

        font-size:12px;

}

a.first:hover{

        color:#060;

        text-decoration:underline;

        font-size:12px;

}

a.second:link{

        color:#00F;

        text-decoration:overline;

        font-size:36px;

}

a.second:hover{

        color:#90F;

        text-decoration:underline;

        font-size:36px;

}

</style>

<a href="#" class="first">链接1</a> <br>

<a href="#" class="first">链接1</a> <hr>

<a href="#" class="second">链接2</a> <br>

<a href="#" class="second">链接2</a> <hr>

运行结果

思考题：a.first和a .first的区别

1.1.11 伪对象选择器

伪类描述的是状态，伪对象描述的是对象。

元素:first-letter，选择元素中内容的第一个字

元素:first-line，选择元素中是内容的第一行

<style type="text/css">

p:first-letter{                /*选择元素的第一个字*/

        font-size:24px;

        color:#F00;

}

div:first-line{                /*选择元素的第一行*/

        font-size:12px;

        color:#060;

        text-decoration:underline;

}

</style>

<p>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。<br>

</p>

<div>

离离原上草，一岁一枯荣。<br>

野火烧不尽，春风吹又生。<br>

远芳侵古道，晴翠接荒城。<br>

又送王孙去，萋萋满别情。

</div>

1.1.12属性选择器

1、 元素[属性：具备指定属性的元素

2、 元素[属性=值：选择指定属性指定值的元素

3、 元素[属性~=值: 选择具有attr属性且属性值为用空格分隔的字词列表，其中一个等于指定值的元素

4、 元素[属性|=值：选择具有attr属性且属性值为用连字符分隔的字词列表，并且由指定的值开始的元素

1.1.1 ID选择器

1、 id选择器以#开头

2、 id选择器只能供一个元素使用

1.1.2 类样式（class样式）

1、 以点（.）开头

2、 可以供多个元素使用

1.1.3 标签选择器

通过标签来选择元素

1.1.4 通配选择器

通过星号（*）来表示所有标签，对所有标签添加样式

1.1.5 组合选择器

如果有多个选择器的样式是一样的，我们可以将这些选择器组合起来一起写。

<style type="text/css">

/*组合选择器*/

div,span{

        color:#F00;

}

#first,h1{

        color:#060;

}

</style>

<div>锄禾日当午，</div>

<p id="first">汗滴禾下土。</p>

<span>谁知盘中餐，</span>

<h1>粒粒皆辛苦。</h1>

1.1.6 后代选择器

1.1.7 子元素选择器（父元素>子元素）

1.1.8 相邻元素选择器

#first+div：紧挨着#first之后的div

#first~div：#first之后的所有的div

1.1.9 伪类

元素:link                正常连接时候的状态

元素:visited        点击以后的状态

元素:hover        当鼠标移动上去的状态

元素:active        当鼠标按下去时候的状态

脚下留心：不是所有的元素都支持这4个状态，有的元素可能只支持其中的某个状态。但是超链接支持这4种状态。

脚下留心：这四种状态要按照lvha的顺序写。（love 爱 hate 恨）

<style type="text/css">

a:link{        /*正常连接时候的状态*/

        color:#F00;

        text-decoration:none;   /*文本修饰*/

        font-size:12px;

}

a:visited{        /*点击后的状态*/

        color:#F0F;

        text-decoration:none;

        font-size:12px;

}

a:hover{        /*当鼠标移动到a标记的时候状态*/

        color:#060;

        text-decoration:underline;

        font-size:24px;

}

a:active{  /*当鼠标点击下去的状态*/

        color:#00F;

        text-decoration:underline;

        font-size:24px;

}

</style>

<a href="#">超链接1</a> <br>

<a href="#">超链接2</a>

例题一

例题二：

1.1.10 伪类选择器与类选择器一起使用

思考一个场景：如何实现一个页面中有两种超链接的样式。

<style type="text/css">

a.first:link{

        color:#F00;

        text-decoration:none;

        font-size:12px;

}

a.first:hover{

        color:#060;

        text-decoration:underline;

        font-size:12px;

}

a.second:link{

        color:#00F;

        text-decoration:overline;

        font-size:36px;

}

a.second:hover{

        color:#90F;

        text-decoration:underline;

        font-size:36px;

}

</style>

<a href="#" class="first">链接1</a> <br>

<a href="#" class="first">链接1</a> <hr>

<a href="#" class="second">链接2</a> <br>

<a href="#" class="second">链接2</a> <hr>

运行结果

思考题：a.first和a .first的区别

1.1.11 伪对象选择器

伪类描述的是状态，伪对象描述的是对象。

元素:first-letter，选择元素中内容的第一个字

元素:first-line，选择元素中是内容的第一行

<style type="text/css">

p:first-letter{                /*选择元素的第一个字*/

        font-size:24px;

        color:#F00;

}

div:first-line{                /*选择元素的第一行*/

        font-size:12px;

        color:#060;

        text-decoration:underline;

}

</style>

<p>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。<br>

</p>

<div>

离离原上草，一岁一枯荣。<br>

野火烧不尽，春风吹又生。<br>

远芳侵古道，晴翠接荒城。<br>

又送王孙去，萋萋满别情。

</div>

1.1.12属性选择器

1、 元素[属性：具备指定属性的元素

2、 元素[属性=值：选择指定属性指定值的元素

3、 元素[属性~=值: 选择具有attr属性且属性值为用空格分隔的字词列表，其中一个等于指定值的元素

4、 元素[属性|=值：选择具有attr属性且属性值为用连字符分隔的字词列表，并且由指定的值开始的元素