IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

7e2952c4b4154aef95d1ffe2767bb6ad.jpg

 

要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制,就需要用到CSS选择器。选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率。在大型网站中,样式表中的代码可能会达到几千行,而当我们需要对样式进行修改时,并没有说明什么样式服务于什么元素,只是在元素中使用了class属性。而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性。CSS3提倡使用选择器来将样式与元素直接绑定起来,这样一来,在样式中什么样式与什么元素相匹配就变得一目了然,修改起来也很方便。不仅如此,通过选择器我们还可以实现各种复杂的指定,同时也能大量减少样式表的代码书写量,使得最终书写出来的样式表变得简洁明了。

 

1  基本选择器

CSS是一种用于屏幕上渲染HTML的语言,它主要是在相应的元素中应用样式来渲染相对应的元素,那么如何选择相应的元素就显得很重要了。这时可以应用选择器。选择器主要用来确定HTML的树形结构中的DOM元素节点。可以把CSS选择器分为基本选择器、属性选择器、伪类选择器等几个部分。基本选择器如表1所示。

表1  CSS3基本选择器及实例

afa92bd28388472a8236998269f147e0.png

 

2  多元素的组合选择器

多个选择器可以组合在一起使用,其组合形式有多种,包括多元素选择器、后代元素选择器、子元素选择器、毗邻元素选择器、同级元素通用选择器5种类型,如表2所示。

表2  CSS3多元素的组合选择器及实例

02254e3bc0064bd3b719dbebde6bf921.png

 

3  属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。如果希望选择具有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。在CSS2.1中就引入了一些属性选择器,如表3所示。

表3  CSS2.1属性选择器及实例

376637d2576b44c49de2f3b21c1f91b5.png

在CSS3中增加了一些属性选择器,使用CSS3的属性选择器,既可以只指定元素的某个属性,也可以同时指定元素的某个属性及其对应的属性值。CSS3的属性选择器如表4所示。

表4  CSS3属性选择器及实例

b2d4a56f4ee14b0181303ae5c8a81a29.png

posted on 2019-11-04 08:37  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航