首页 理论教育CSS选择器|Web前端框架开发技术

CSS选择器|Web前端框架开发技术

【摘要】:利用CSS 选择器能轻松地对某个元素添加样式而不改动HTML 结构,只需通过添加不同的CSS 规则,就可以得到各种不同样式的网页。在CSS 中,执行这一任务的表现规则称为CSS 选择器。学会使用CSS 选择器是学习CSS 的基础,它为在获取目标元素之后施加样式提供了极大的灵活性。常用的CSS 选择器分类见表2.1。此外CSS 中还有伪类选择器。但遗憾的是,主流浏览器并非完全支持所有的CSS 选择器。

在开始学习jQuery 选择器之前,有必要简单了解前几年流行起来的CSS(Cascading StyleSheets,层叠样式表)技术。

CSS 是一项出色的技术,它使得网页的结构和表现样式完全分离。利用CSS 选择器能轻松地对某个元素添加样式而不改动HTML 结构,只需通过添加不同的CSS 规则,就可以得到各种不同样式的网页。

要使某个样式应用于特定的HTML 元素,首先需要找到该元素。在CSS 中,执行这一任务的表现规则称为CSS 选择器。学会使用CSS 选择器是学习CSS 的基础,它为在获取目标元素之后施加样式提供了极大的灵活性。常用的CSS 选择器分类见表2.1。

表2.1 常用的CSS 选择器

几乎所有主流浏览器都支持上面这些常用的选择器。此外CSS 中还有伪类选择器。

(E:Pseudo-Elements{CssRules})、子选择器(E>F{CssRules})、临近选择器(E+F {CssRules})和属性选择器([attr]{CssRules})等。但遗憾的是,主流浏览器并非完全支持所有的CSS 选择器。

了解这些相关知识后,来看一个有关CSS 类选择器的简单例子,代码如下:

(www.chuimin.cn)

上面代码的意思是将<p>元素里的文本颜色设置为红色,字体大小设置为30px。

像上面这样把CSS 代码和HTML 代码混杂在一起的做法是非常不妥的,它并不符合表现和内容相分离的设计原则。因此建议使用下面的方法,代码如下:

运行结果如图2.1 所示。

图2.1 弹出警告框

先把样式写在<style>标签里,然后用class 属性将元素和样式联系起来。class 作为连接样式和网页结构的纽带。这样的写法不仅容易理解和阅读,而且当需要改变一些样式的时候,只要在<style>标签里改变相关的样式即可。