黑马程序员技术交流社区

标题: 常用的CSS选择器 [打印本页]
作者: wendyYao    时间: 2017-9-1 13:54
标题: 常用的CSS选择器
1.1.1 ID选择器
1、 id选择器以#开头
2、 id选择器只能供一个元素使用
[attach]182652[/attach]
1.1.2 类样式（class样式）
1、 以点（.）开头
2、 可以供多个元素使用
[attach]182653[/attach]
1.1.3 标签选择器
通过标签来选择元素
[attach]182654[/attach]
1.1.4 通配选择器
通过星号（*）来表示所有标签，对所有标签添加样式
[attach]182655[/attach]
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>
[attach]182656[/attach]
1.1.6 后代选择器[attach]182657[/attach]
1.1.7 子元素选择器（父元素>子元素）[attach]182658[/attach]
1.1.8 相邻元素选择器
#first+div：紧挨着#first之后的div
[attach]182659[/attach]
#first~div：#first之后的所有的div
[attach]182660[/attach]
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>
[attach]182661[/attach]
例题一
[attach]182662[/attach]
例题二：
[attach]182663[/attach]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属性且属性值为用连字符分隔的字词列表，并且由指定的值开始的元素







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2