CSS选择器(一)_html/css_WEB-ITnose
以下是我总结的5种常用的CSS选择器。
1、标签选择器
eg: p{ color:#333; }
a{ display:block; }
优点:能快速为页面中同类型的标签统一样式。
缺点:不能设计差异化的样式,有时会造成样式的相互干扰。
2、ID选择器
eg: #nav{ margin:0px; padding:10px; }
解释说明: '#' 为ID选择符前缀
'nav' 为ID名称
元素的ID名称是唯一的,只能对应文档中的一个元素。
适用范围:在页面中唯一、固定、不会重复出现的对象,如导航栏等。
3、类选择器
eg: .col{ }
解释说明: '.' 为类选择符前缀
'col' 为类名
适用范围:类样式可应用于文档中的多个元素。
特性:①使用类选择器前,需在HTML文档中为要应用类样式的元素定义相应的class属性;
②有较好的灵活性,可指定类样式应用的元素对象范围。
比较:在同等条件下,ID选择器的优先权比类选择器更大。
4、伪类和伪对象选择器
eg: a:hover{ font-weight;bold; }
解释说明: 'a' 为指定标签名
':' 为伪类或伪元素标识符
'hover' 为伪类或伪元素名
适用范围:用以选择特殊状态或特殊区域下的元素。
6种常用伪类选择器如下表所示:
伪类 | 说明 |
:focus | 定义对象在成为输入焦点时的样式 |
:link | 定义未访问过的超链接样式 |
:visited | 定义访问过的样式 |
:hover | 定义鼠标经过的样式 |
:active | 定义鼠标按下的样式 |
:first-child | 定义对象的第一个子对象的样式 |
eg: a{ text-decoration:none; }
a:link{ color: black; }
a:visited{ color: red; }
a:hover{ color: blue; }
a:active{ color: grey; }
关于":link"伪类,有些浏览器会把它解析为任何超链接,即它既可以是访问过的,也可以是未访问的。故有时可用a选择器样式来替代a:link选择器样式。
注意:在IE浏览器中,是用于超链接相关的伪类选择器时应为a元素定义href属性,否则会失效,但在其他浏览器中则可用无需为a元素定义href属性。
5、子选择器
eg: div>a{ color:#fff; }
解释说明: 'div' 为父级选择符名
'>' 为子选择符标识符
'a' 为子级选择符名
注意:①子选择器中所控制的元素只能是‘>’符号前面所指定对象的子元素。
推荐阅读
-
在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript
-
实例教程 利用html5和css3打造一款创意404页面
-
css选择器(一)基本选择器
-
【实战】如何通过html+css+mysql+php来快速的制作动态网页(以制作一个博客网站为列)
-
CSS3 :not()选择器实现最后一行li去除某种css样式
-
前端笔记知识点整合之jQuery(一)加载函数的区别&对象&操作HTML/CSS&动画&选择器
-
HTML5实战与剖析之CSS选择器——querySelectorAll()
-
HTML和CSS前端教程03-CSS选择器
-
HTML5中的伪类选择器实现一张图片翻转特效(代码实例)
-
HTML/CSS基础知识(一)