CSS选择器-白红宇

CSS选择器

阅读量：5092 次

发布时间：2019-06-13

本文共 2870 字，大约阅读时间需要 9 分钟。

选择器（选择符）可以包括：ID选择器，类别选择器，元素选择器、后代选择符、子选择符、相邻选择符、属性选择符、伪类选择符、为对象选择符。我们通常不会仅使用一种选择符通常的做法是把上面的选择符按照不同的方式组合起来进行匹配选择的。通常会有选择符群组合，ID和元素组合，类和元素组合。因为CSS属性会有继承关系，页面中出现的一个元素会同时有多个CSS属性定义。

ID选择器：

这里定义一个段落

#line{ color:#ff0000; height:24px; line-height:24px;}

如上我们可以通过”#”加上ID值#line来定义html标签在页面中显示的规则。需要注意的是：一个ID在页面中只能出现一次，除非你能非常明确的确定这个页面中这个ID值只会出现一次才可以去定义。通常我们在一个页面中使用ID定义的有#header(定义头部)、#footer(定义底部)。ID值还能为使用js脚本定义一个钩子，方便js脚本对html DOM的操作。我个人一般情况下是做此使用的不过为了便于区别，为js定义的钩子ID会在ID值前面加上个js进行区分。就像上面的段落如果为js定义一个钩子，可以如下写这里定义一个短路

类别选择器：

能够重复使用的在多种标签上面的一种选择器。可以为不同的标签使用相同的类名的选择器。我们可以定一个一个class=”line”的类。然后为它写如下的样式：.line{ color:red; font-size:14px;}.这样我们就可以在页面中所有需要定义这种样式的地方添加一个类line。在网站的实际项目开发中，很多人常常会使用类选择器定义各种功能模块的样式。这样就可以重复调用，而且有利于后期查看和使用。常常会根据模块功能来定义类名。假如我们需要定义一个菜单功能的样式，可以定义一个menu的类。为页面各种标题来定义一个tilte的类。为侧边栏定义slibar的类。内容区域定义一个wrap的类。如果相同功能的模块需要定义不同的样式我们可以使用数字如：title1、title2、title3来定义各种不同的样式。

元素选择器：

元素选择器是最简单的选择器。直接使用html的标签名称定义样式。如：

P{ height:24px; line-height:24px; color:red;}

Div{ width:800px; height:400px; border:1px solid #000;}

后代选择器：

是样式表中很重要而且很常用的一种选择器。例如：我们需要查找所有段落标签中的span标记，然后把字体设为红色，可以如下写：

P span{ color:red;}

这样就达到了上面的效果，不过上面的方法覆盖的面积是页面中所有段落下面的span标签，除非你确定自己需要的此中效果，还有就是我们可以在元素上面添加一个类或者ID这样就能控制我们想要控制的那些标签元素了。如下：

这里是内容区域

.line span{ color:#ff0000;}

或者

这里是内容区域

#line span{ color:#ff0000;}

CSS选择器通过上面的四种方法和他们之间的不同组合方式，基本上可以完成所有的事情了。但是某些浏览器厂商为了开发者更方便的查找元素节点还支持子选择符、相邻选择符、属性选择符这几种方式。这些选择器的出现在部分浏览器上解决了开发人员很大一部分的工作，但是却有些游览器不支持这些牛叉的技术（大家都懂得，就是IE这个家伙不支持啦），但是为了成为一名合格的WEB前端开发，我们需要了解一下这些内容。

子选择符：

自选择器使用>把父标签和子标签相连。Body>stong{ color:#ff0000; font-size:18px;}此段代码定义紧跟在body标签元素后面的strong元素的样式。子代选择符无法定义子代元素之外的样式。作用比较单一。IE6不支持,IE7支持。其它浏览器支持，所以使用的时候请酌情考虑哈！

相邻选择符：

写法 p + strong 和上面的子代选择器差不多。P+strong定义段落标签p紧挨着的strong标签的样式属性。

属性选择符：E[attr]

Input[type=’text’],a[class=’line’],input[type=’radio’]根据元素标签是否含有某个属性来查找元素，然后定义元素的样式。属性选择符根据判断符号不同有以下四种：

1、E[attr] 属性选择符。

选择具有attr属性的E。

2、Attribute Selectors

E[attr=value] 属性选择符。

选择具有attr属性且属性值等于value的E。

3、Attribute Selectors

E[attr~=value] 属性选择符。

选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E。