有效且结构良好的文档为你要应用的样式提供了一个框架。要想使用CSS将样式应用于特定的HTML少已素,须要想办法找到这个元素口在CsS中,执行这一任务的样式规则部分称为选择器。web
◇ 经常使用选择器:浏览器
最经常使用的选择器类型是类型选择器和后代选择器,类型选择器用来寻找特定类型的元素,好比段落或标题元素,只需指定但愿应用样式的元素的名称,类型选择器有时候也称为元素选择器或简单选择器。框架
后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其余两个选择器之间的空格表示。在这个示例中,只缩进是块引用的后代的段落元素,其余全部段落不受影响。spa
这两种选择器适合于应用那些应用范围广的通常性样式。要想寻找更特定的元素,可使用ID选择器和类选择器口顾名思义,这两种选择器用于寻找那些具备指定ID或类名的元素。ID选择器由一个#字符表示,类选择器由一个点号表示。下面示例中的第一条规则使简介段落中的文本以粗体械示,第二条规则让日期显示为绿色:orm
前面提到过,许多CSS开发人员过分依赖类选择器和皿选择器。若是他们但愿以一种方式对主内容区域中的标题应用样式,而在第二个内容区域中采用另外一种方式,那么他们极可能建立两个类并几在每一个标题上应用一个类,一种简单得多的方法是结合使用类型、后代、D和类这几种选择器:blog
这是一个很是简单明朗的示例。可是,让你吃惊的是,只使用前面讨论的4种选择器就能够成功地找到了许多元素。若是你发现本身在文档添加了许多没必要要的类,那么这多是文档结构不合理的一个警告信号。这时应该分析这些元素之间的差别。你经常会发现惟一的差别是它们在页面.上出现的位置。不要给这些元素指定不1司的类,而应将一个类或ID应用于它们的祖先,而后使用后代选择器定位它们。ci
伪类:jsx
有时候,咱们须要根据文档结构以外的其余条件对元素应用样式,例如表单元素或连接的状态。这要使用伪类选择器来完成。开发
:link和:visited称为连接伪类,只能应用于锚元素。:hover :active和:focus称为动态伪类,理论上能够应用于任何元素。大多数浏览器都支持这个功能口可是,IE6只注意应用于锚连接的:active和:hover选择器,彻底忽略:focus。IE7在任何元素上都支持:hover,可是忽略:active和:focus。文档
最后,值得指出的是:经过把伪类链接在一块儿,能够建立更复杂的行为,好比在已访问连接和未访问连接上实现不一样的鼠标悬停效果。
◇ 通用选择器
通用选择器多是全部选择器中最强大却最少使用的。通用选择器的做用就像是通配符,匹配全部可用元素。与其余语言中的通配符同样,通用选择器由一个星号表示。通用选择器通常用来对页面上的全部元素应用样式。例如,可使用如下规则删除每一个元素上默认的浏览器内边距和外边距:
在与其余选择器结合使用时,通用选择器能够用来对某个元素的全部后代应用样式,或者跳过一级后代。在本文之后将看到这么作的实际效果。
本文来自 >> 尚学堂; 转载请注明:http://www.sxt.cn/u/13421/blog/9068