[教程] CSS3 选择器——基本选择器(一)
2014-07-24 14:27
337 查看
CSS3选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别,从头一起来看看CSS3选择器的运用。
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器;第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器,这一部分也是最难理解和掌握的部分,今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图,如下图:
![](http://www.html5bl.com/data/attachment/forum/201404/22/090703nkxqmk8q5gkq5qgg.png)
下面我们先看看上表中基本的选择器的使用方法和其所起的作用,为了更好的说明问题,先创建一个简单的DOM结构,如下:
<div class="demo">
<ul class="clearfix">
<li id="first" class="first">1</li>
<li class="active important">2</li>
<li class="important items">3</li>
<li class="important">4</li>
<li class="items">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="last" class="last">10</li>
</ul>
</div>
复制代码
给这个demo加上一些样式,让他好看一点
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
li {
float: left;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
}
复制代码
初步效果如下所示:
![](http://www.html5bl.com/data/attachment/forum/201404/22/090806e70uuwl2r0ljigun.png)
一、通配符选择器(*)
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。如:
*{
marigin: 0;
padding: 0;
复制代码
上面代码大家在reset样式文件中看到的肯定不少,他所表示的是,所有元素的margin和padding都设置为0,另外一种就是选择某个元素下的所有元素:
.demo * {border:1px solid blue;}
复制代码
效果如下:
![](http://www.html5bl.com/data/attachment/forum/201404/22/090902cabiac33vajsvvna.png)
从上面的效果图看,只要是div.demo下的元素边框都加上了新的样式。所有浏览器支持通配符选择器。
二、元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等,比如我们这个demo:中元素包括了div,ul,li等。
li {background-color: grey;color: orange;}
复制代码
所有浏览器支持元素选择器(E)。
三、类选择器(.className)
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类,如:
<li class="active important items">2</li>
复制代码
共中“active,important, items”就是我们以类给li加上一个类名,以便类选择器能正常工作,从而更好的将类选择器的样式与元素相关联。
.important {font-weight: bold; color: yellow;}
复制代码
上面代码表示是给有important类名的元素加上一个“字体为粗体,颜色为***”的样式,如
![](http://www.html5bl.com/data/attachment/forum/201404/22/091115ebzf00bfo0os6btf.png)
类选择器还可以结合元素选择器来使用,比如说,你文档中有好多个元素使用了类名“items”,但你只想在p元素这个类名上修改样式,那么你可以这样进行选择并加上相应的样式:
p.items {color: red;}
复制代码
上面代码只会匹配class 属性包含important 的所有p 元素,但其他任何类型的元素都不匹配,包括有“items”这个类名的元素,上面也说过了“p.items”只会对p元素并且是其有一个类名叫“items”。不符合这两个条件的都不会被选择。
类选择器还有可以具备多类名,上面我们也看到了,我们li元素中同时有两个或多少类名,其中他们以空格隔开,那么选择器也可以使用多类连接在一起,如:
.important {font-weight: bold;}
复制代码
正如上面的代码所示,".important.items"这个选择器只对元素中同时包含了"important"和"items"两个类才能起作用,如图所示:
![](http://www.html5bl.com/data/attachment/forum/201404/22/091208uanob66bdxpnd1co.png)
有一点大家需要注意,如果一个多类选择器包含的类名中其中有一个不存在,那么这个选择器将无法找到相匹配的元素 比如说下在这句代码,他就无法到找相对应的的元素标签,因为我们列表中只有一个li.first和一个li.last,不存在有一个叫li.first.last的列表项:
.first.last {color: blue;}
复制代码
所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。
四、id选择器(#ID)
ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id)
#first {background: lime;color: #000;}
复制代码
上在的代码就是选择了id为"first"和"last"的列表项,其效果如下
![](http://www.html5bl.com/data/attachment/forum/201404/22/091305qpxg2qdxg0dup2x0.png)
ID选择器有几个地方需要特别注意的,第一:一个文档中一个id选择器只充许使用一次,因为id在页面中是唯一的;第二,id选择器不能像类选择器一样多个合并使用,一个元素只能命名一个id名;第三,可以在不同的文档中使用相同的id名,比如说在“test.html”中给h1定了“#important”,也可以给“test1.html”中定义p的id为"#important",但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。
所有浏览器都支持ID选择器。
那么什么时候采用id命名?什么时候采用类命名呢?我个人认为就是关键的一点就是具有唯一性使用id选择器;公用的,类似的使用类选择器。使用这两个选择器时,最好区别大小写。
五、后代选择器(E F)
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中:
.demo li {color: blue;}
复制代码
所有浏览器都支的后代选择器。
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器;第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器,这一部分也是最难理解和掌握的部分,今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图,如下图:
![](http://www.html5bl.com/data/attachment/forum/201404/22/090703nkxqmk8q5gkq5qgg.png)
下面我们先看看上表中基本的选择器的使用方法和其所起的作用,为了更好的说明问题,先创建一个简单的DOM结构,如下:
<div class="demo">
<ul class="clearfix">
<li id="first" class="first">1</li>
<li class="active important">2</li>
<li class="important items">3</li>
<li class="important">4</li>
<li class="items">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="last" class="last">10</li>
</ul>
</div>
复制代码
给这个demo加上一些样式,让他好看一点
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
li {
float: left;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
}
复制代码
初步效果如下所示:
![](http://www.html5bl.com/data/attachment/forum/201404/22/090806e70uuwl2r0ljigun.png)
一、通配符选择器(*)
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。如:
*{
marigin: 0;
padding: 0;
复制代码
上面代码大家在reset样式文件中看到的肯定不少,他所表示的是,所有元素的margin和padding都设置为0,另外一种就是选择某个元素下的所有元素:
.demo * {border:1px solid blue;}
复制代码
效果如下:
![](http://www.html5bl.com/data/attachment/forum/201404/22/090902cabiac33vajsvvna.png)
从上面的效果图看,只要是div.demo下的元素边框都加上了新的样式。所有浏览器支持通配符选择器。
二、元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等,比如我们这个demo:中元素包括了div,ul,li等。
li {background-color: grey;color: orange;}
复制代码
所有浏览器支持元素选择器(E)。
三、类选择器(.className)
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类,如:
<li class="active important items">2</li>
复制代码
共中“active,important, items”就是我们以类给li加上一个类名,以便类选择器能正常工作,从而更好的将类选择器的样式与元素相关联。
.important {font-weight: bold; color: yellow;}
复制代码
上面代码表示是给有important类名的元素加上一个“字体为粗体,颜色为***”的样式,如
![](http://www.html5bl.com/data/attachment/forum/201404/22/091115ebzf00bfo0os6btf.png)
类选择器还可以结合元素选择器来使用,比如说,你文档中有好多个元素使用了类名“items”,但你只想在p元素这个类名上修改样式,那么你可以这样进行选择并加上相应的样式:
p.items {color: red;}
复制代码
上面代码只会匹配class 属性包含important 的所有p 元素,但其他任何类型的元素都不匹配,包括有“items”这个类名的元素,上面也说过了“p.items”只会对p元素并且是其有一个类名叫“items”。不符合这两个条件的都不会被选择。
类选择器还有可以具备多类名,上面我们也看到了,我们li元素中同时有两个或多少类名,其中他们以空格隔开,那么选择器也可以使用多类连接在一起,如:
.important {font-weight: bold;}
复制代码
正如上面的代码所示,".important.items"这个选择器只对元素中同时包含了"important"和"items"两个类才能起作用,如图所示:
![](http://www.html5bl.com/data/attachment/forum/201404/22/091208uanob66bdxpnd1co.png)
有一点大家需要注意,如果一个多类选择器包含的类名中其中有一个不存在,那么这个选择器将无法找到相匹配的元素 比如说下在这句代码,他就无法到找相对应的的元素标签,因为我们列表中只有一个li.first和一个li.last,不存在有一个叫li.first.last的列表项:
.first.last {color: blue;}
复制代码
所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。
四、id选择器(#ID)
ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id)
#first {background: lime;color: #000;}
复制代码
上在的代码就是选择了id为"first"和"last"的列表项,其效果如下
![](http://www.html5bl.com/data/attachment/forum/201404/22/091305qpxg2qdxg0dup2x0.png)
ID选择器有几个地方需要特别注意的,第一:一个文档中一个id选择器只充许使用一次,因为id在页面中是唯一的;第二,id选择器不能像类选择器一样多个合并使用,一个元素只能命名一个id名;第三,可以在不同的文档中使用相同的id名,比如说在“test.html”中给h1定了“#important”,也可以给“test1.html”中定义p的id为"#important",但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。
所有浏览器都支持ID选择器。
那么什么时候采用id命名?什么时候采用类命名呢?我个人认为就是关键的一点就是具有唯一性使用id选择器;公用的,类似的使用类选择器。使用这两个选择器时,最好区别大小写。
五、后代选择器(E F)
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中:
.demo li {color: blue;}
复制代码
所有浏览器都支的后代选择器。
相关文章推荐
- jQuery基础教程之 基本选择器
- CSS3 选择器 基本选择器介绍
- [教程] CSS3 选择器——伪类选择器(一)
- CSS3选择器——1、基本选择器
- Css3选择器-基本选择器
- class_01:基本选择器|zend实验室jquery系列教程
- CSS3 选择器 基本选择器介绍
- CSS3中31种选择器使用方法教程
- css3基础教程十三征服CSS3选择器
- jQuery基础教程之强大的选择器(基本选择器)
- HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
- CSS3 选择器——基本选择器
- [教程] CSS3 选择器——属性选择器(一)
- IE10 下CSS3选择器及动画(animation)效果实例教程
- CSS3 选择器——基本选择器
- CSS3 选择器 基本选择器介绍
- HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
- CSS3-基本选择器语法(实战)
- css3基本选择器