CSS3 选择器 基本选择器介绍


Posted in HTML / CSS onJanuary 21, 2012

那么从现在开始我们先丢开他们版本的区别,从头一起来看看CSS选择器的运用。

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器;第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器,这一部分也是最难理解和掌握的部分,今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图

CSS3 选择器 基本选择器介绍

下面我们先看看上表中基本的选择器的使用方法和其所起的作用,为了更好的说明问题,先创建一个简单的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;
}

初步效果如下所示:

CSS3 选择器 基本选择器介绍

一、通配符选择器(*)
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。如:
复制代码
代码如下:

*{
marigin: 0;
padding: 0;
}

上面代码大家在reset样式文件中看到的肯定不少,他所表示的是,所有元素的margin和padding都设置为0,另外一种就是选择某个元素下的所有元素:
复制代码
代码如下:

.demo * {border:1px solid blue;}

效果如下;

CSS3 选择器 基本选择器介绍

从上面的效果图看,只要是div.demo下的元素边框都加上了新的样式。所有浏览器支持通配符选择器。

二、元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等,比如我们这个demo:中元素包括了div,ul,li等。

复制代码
代码如下:
li {background-color: grey;color: orange;}

上在表示选择页面的li元素,并设置了背景色和前景色,效果如下:

CSS3 选择器 基本选择器介绍

所有浏览器支持元素选择器(E)。

三、类选择器(.className)
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类,如:

<li class="active important items">2</li>
共中“active,important, items”就是我们以类给li加上一个类名,以便类选择器能正常工作,从而更好的将类选择器的样式与元素相关联。

.important {font-weight: bold; color: yellow;}
上面代码表示是给有important类名的元素加上一个“字体为粗体,颜色为黄色”的样式,如

CSS3 选择器 基本选择器介绍

类选择器还可以结合元素选择器来使用,比如说,你文档中有好多个元素使用了类名“items”,但你只想在p元素这个类名上修改样式,那么你可以这样进行选择并加上相应的样式:
p.items {color: red;}
上面代码只会匹配class 属性包含important 的所有p 元素,但其他任何类型的元素都不匹配,包括有“items”这个类名的元素,上面也说过了“p.items”只会对p元素并且是其有一个类名叫“items”。不符合这两个条件的都不会被选择。

类选择器还有可以具备多类名,上面我们也看到了,我们li元素中同时有两个或多少类名,其中他们以空格隔开,那么选择器也可以使用多类连接在一起,如:

复制代码
代码如下:

.important {font-weight: bold;}
.active {color: green;background: lime;}
.items {color: #fff;background: #000;}
.important.items {background:#ccc;}
.first.last {color: blue;}

正如上面的代码所示,".important.items"这个选择器只对元素中同时包含了"important"和"items"两个类才能起作用,如图所示:

CSS3 选择器 基本选择器介绍

有一点大家需要注意,如果一个多类选择器包含的类名中其中有一个不存在,那么这个选择器将无法找到相匹配的元素 比如说下在这句代码,他就无法到找相对应的的元素标签,因为我们列表中只有一个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;}
#last {background: #000;color: lime;}

上在的代码就是选择了id为"first"和"last"的列表项,其效果如下

CSS3 选择器 基本选择器介绍

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;}
上面表示的是,选中div.demo中所有的li元素

CSS3 选择器 基本选择器介绍

所有浏览器都支的后代选择器。

六、子元素选择器(E>F)

子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的子元素而以。
ul > li {background: green;color: yellow;}
上在代码表示选择ul下的所有子元素li。如:

CSS3 选择器 基本选择器介绍

IE6不支持子元素选择器。

七、相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。

复制代码
代码如下:
li + li {background: green;color: yellow; border: 1px solid #ccc;}

上面代码表示选择li的相邻元素li,我们这里一共有十个li,那么上面的代码选择了从第2个li到 10 个li,一共九个,请看效果:

CSS3 选择器 基本选择器介绍

因为上面的li+li其中第二li是第一li的相邻元素,第三个又是第二个相邻元素,因此第三个也被选择,依此类推,所以后面九个li都被选中了,如果我们换过一种方式来看,可能会更好的理解一点:

复制代码
代码如下:

.active + li {background: green;color: yellow; border: 1px solid #ccc;}

按照前面所讲的知识,这句代码很明显选择了li.active后面相邻的li元素,注意了和li.active后面相邻的元素仅只有一个的。如图:

CSS3 选择器 基本选择器介绍

IE6不支持这个选择器

八、通用兄弟选择器(E 〜 F)

通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。比如下面的代码:

复制代码
代码如下:
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

上面的代码所表示的是,选择中了li.active 元素后面的所有兄弟元素li,如图所示:

CSS3 选择器 基本选择器介绍

通用兄弟选择器和相邻兄弟选择器极其相似,只不过,相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素(选中的仅一个元素);而通用兄弟元素选择器,选中的是元素相邻的后面兄弟元素,这样说起来可能会有迷糊,大家可以仔细看看其相邻兄弟的效果图。

IE6不支持这种选择器的用法。

九、群组选择器(selector1,selector2,...,selectorN)

群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开,如上面所示selector1,selector2,...,selectorN。这个逗号告诉浏览器,规则中包含多个不同的选择器,如果不有这个逗号,那么所表达的意就完全不同了,省去逗号就成了我们前面所说的后代选择器,这一点大家在使用中千万要小心加小心。我们来看一个简单的例子:

复制代码
代码如下:
.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

因为li.first和li.last具有相同的样式效果,所以我们把他们写到一个组里来:

CSS3 选择器 基本选择器介绍

所有浏览器都支持群组选择器。

上面九种选择器是CSS3中的基本选择器,而我们最常用的是元素选择器、类选择器、ID选择器、后代选择器、群组选择器,同时大家可以在实际应用中把这些选择器结合起来使用,达到目的就行了。那么关于CSS3选择器的第一部分——基本选择器就介绍到这里,有点简单,希望对初次接触CSS的同学有所帮助,下节将介绍CSS3选择器的第二部分——属性选择器,感兴趣的朋友请观注本站的更新。

如需转载烦请注明出处:W3CPLUS

HTML / CSS 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
CSS3制作日历实现代码
Jan 21 #HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 #HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 #HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 #HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 #HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 #HTML / CSS
CSS3 特效范例整理
Aug 22 #HTML / CSS
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
vuejs指令详解
2017/02/07 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue实现浏览器全屏展示功能
2019/11/27 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python实现点云投影到平面显示
2020/01/18 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
C#笔试题集合
2013/06/21 面试题
物业管理求职自荐信
2013/09/25 职场文书
应届生个人求职信模板
2013/11/26 职场文书
音乐教学反思
2014/02/02 职场文书
社区母亲节活动记录
2014/03/06 职场文书
就业协议书怎么填
2014/09/15 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
生日祝酒词大全
2015/08/10 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
Python实现为PDF去除水印的示例代码
2022/04/03 Python