五类CSS选择器

CSS选择器可以准确的查找到指定的标签,使用CSS选择器可以使我们方便为标签定义CSS样式,而不用为每个标签都定义CSS样式。

下面我们讲一下最常用的五种CSS选择器:

一、标签选择器:通常用它来查找HTML中的某一种标签。

例如:

要为HTML中的所有P标签设计样式,可以使用下面的方法

p { font:12px;}

二、id选择器: 通常用它来查找标签中ID为指定值。

例如:

在HTML中有一个这样的标签<div id="menubar"></div>我们可以看到的的id值为menubar,

现在我们要为id值为menubar定义样式,可以这样

#menubar {
margin:0 auto;
background:#ccc;
color:#c00;
}

三、类选择器: 类选择器主要用来查找一组相同类型的标签

例如:在HTML中类选择器用来查找标签中属性class为某一类的一组标签如 <span class="da1">

我们可以
.da1 {
color:#f60;
font-size:14px ;
}

这样凡是标签中class为da1的都会应用这个样式。

四、后代选择器:后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式

例如:

li strong {
font-style:italic;
font-weight:800;
color:#f00;
}
给HTML中li标签下的子标签strong标签定义上面的样式

五、群组选择器: 查找一组选择器可以使用群组选择器
例如:当几个选择器都使用一样的样式时,可以使用如下方法

.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}

注意选择器之间以逗号分隔

 

实际上CSS选择器的技术不只可以用在CSS上面,也可以用在其它查找DOM元素上面,如JAVASCRIPT框架JQUERY就使用了CSS选择器技术。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章