CSS 1.0~3.0选择器(上)

HTML5学堂:我们学过了最为基础的id,类名和标签名选择器,然后就一直用它们了吗?如果是这样,那会丢失掉CSS选择器强大的功能。我们会花费几篇文章的篇幅,将CSS1.0版本至当前最新的3.0版本当中,存在的所有选择器讲解一遍,今天我们先来说说比较基础的选择器。

通配符选择器

基本语法

* {
margin: 0;
padding: 0;
}

HTML5学堂的一些提醒:

对于初学者,在学习更多高级选择器之前,最先了解的选择器。

星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为零。虽然在快速测试时这确实很好用,但建议永远不要使用它,它会给浏览器带来大量不必要的负担。我们通常通过reset文件进行样式的重置。

此外,* 也能作为子选择符使用。

#h5course * {
border: 1px solid black;
}

这将匹配#h5course的每一个后代元素。

兼容性

IE6+、Firefox、Chrome、Safari、Opera

id选择器

基本语法

#X

#h5course {
width: 960px;
margin: auto;
}

HTML5学堂的一些提醒:

#号前缀允许我们通过id选择标签。这是最常见的用法,不过应该慎重使用ID选择器。

id选择符是唯一的,不允许重复使用。如果可能的话,先尝试使用一个标签名称,一个新的HTML5元素,甚至是一个伪类。

兼容性

IE6+、Firefox、Chrome、Safari、Opera

类名选择器

基本语法

.X

.h5course {
width: 960px;
margin: auto;
}

HTML5学堂的一些提醒:

id和类的不同之处在于后者可以多次使用。当你想给一组元素应用样式的时候可以使用类选择符,当需要给特殊元素应用样式的时候才使用id。

通常设置id,往往与JS相关~

兼容性

IE6+、Firefox、Chrome、Safari、Opera

标签名选择器

基本语法

X

div {
width: 960px;
margin: auto;
}

HTML5学堂的一些提醒:

如果你想根据页面元素的类型,而不是id或类名,匹配到页面上的相应元素,那么可以使用标签名选择器,但是很不建议单独使用标签名选择器进行样式控制,原因很简单——选择范围太广,容易对其他元素造成影响。

兼容性

IE6+、Firefox、Chrome、Safari、Opera

后代选择器

基本语法

X Y

.h5course div {
width: 960px;
margin: auto;
}

HTML5学堂的一些提醒:

当你需要给你的选择符增加特殊性的时候,可以使用。例如,如果你只想匹配类名为h5course下的div元素?此时后代选择符派上用场。

如果你的选择符看起来像这样 X Y Z A B.error,那你就错了,并非一味的后代就是合理的~时常问问自己,是否有必要这么做~

兼容性

IE6+、Firefox、Chrome、Safari、Opera

伪类选择器

基本语法

X:visited and X:link

a:link {
color: red;
}
a:hover {
color: purple;
}

HTML5学堂的一些提醒:

比较经典的伪类选择器有四种,分别是hover、link、active、visited。最初伪类选择器只能应用于a标签,从IE7之后,其他浏览器也支持其他标签的伪类效果了。可以把伪类理解为一种标签的状态。如,a:hover表示的就是当鼠标悬停在a标签上时的效果。

兼容性

IE7+、Firefox、Chrome、Safari、Opera

相邻选择器

基本语法

X + Y

ul + .h5course {
color: red;
}

HTML5学堂的一些提醒:

只选择紧贴在X元素之后Y元素。上面的例子,仅每一个ul之后的第一个类名为h5course元素的文本为红色。

兼容性

IE7+、Firefox、Chrome、Safari、Opera

子代选择器

基本语法

X > Y

#h5course > p {
color: red;
}

HTML5学堂的一些提醒:

X Y和X > Y之间的不同点是后者只选择直接子代。

选择符#h5course > p将只选择id为h5course的元素的直接子代p。它不匹配更深层的p元素。

兼容性

IE7+、Firefox、Chrome、Safari、Opera

兄弟选择器

基本语法

X ~ Y

ul ~ div {
color: red;
}

HTML5学堂的一些提醒:

与相邻选择符(ul + div)仅选择前一个选择符后面的第一个元素比起来,兄弟选择符更宽泛。它会选择,我们上面例子中更在ul后面的任何div元素。

兼容性

IE7+、Firefox、Chrome、Safari、Opera

属性选择器

基本语法

X[title]

a[title] {
color: red;
}

HTML5学堂的一些提醒:

属性选择器,在我们上面的例子里,这只会选择有title属性的锚标签。没有此属性的锚标签将不受影响。

兼容性

IE7+、Firefox、Chrome、Safari、Opera

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴裕超

JavaScript 函数节流和函数去抖应用场景辨析

函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听。举个例子,实现一个原生的拖拽功能(不能用 H5 Drag&Drop API),需要一路监听 m...

2917
来自专栏Golang语言社区

【Go 语言社区】epoll详解

什么是epoll epoll是什么?按照man手册的说法:是为处理大批量句柄而作了改进的poll。当然,这不是2.6内核才有的,它是在2.5.44内核中被引进的...

41912
来自专栏前端小作坊

React diff 算法

React是facebook开发的一个用于UI开发的基础库。它自底向上重新设计了,为了实现高性能。在这篇文章中将展示React的diff算法是如何来优化你的ap...

863
来自专栏Python攻城狮

Spider与OpenPyXL的结合1.OpenPyXL基础操作操作数据保存到文件2.爬虫与OpenPyXL的结合(爬取前程无忧网站招聘数据,存储Excel表格中)使用同样的分析方法爬取智联招聘岗位信

通过上述的语句,将返回在A4处的单元格,如果不存在将在A4新建一个。 单元格的值也可以直接赋值

1051
来自专栏每周一脱topic

Effictive python学习总结连载(1)

python从读研开始就在用了,拿来做过web后台、安全分析、爬虫、测试框架等等,挺强大的。最近借放假和看书和整理的机会,系统的总结下。主要是2方面:一个是书或...

1562
来自专栏九彩拼盘的叨叨叨

写出好的前端代码不是件容易事

什么样的代码算是好代码? 在我看来,易于维护的代码就是好代码。当然代码还可以从性能,安全等方面来考量。这些不在本文的讨论范围之内。

643
来自专栏灯塔大数据

技术 | Python从零开始系列连载(十九)

但它的特点就是下次使用next(a)时,接着上次的断点继续运行,直到下一个yield

873
来自专栏吴裕超

点击穿透原理及解决

一、事件触发顺序 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown、mouseup、mousemove和click事件。一次点击行...

3536
来自专栏农夫安全

浅析XSS的几种测试方法

0x00 背景 最近看到一个好玩的xss社区,准备通过几个经典的关卡来剖析一下XSS,本文仅提供经典案例。 试玩链接:http://tr.secevery...

2908
来自专栏xingoo, 一个梦想做发明家的程序员

Elasticsearch入门必备——ES中的字段类型以及常用属性

使用Elasticsearch时,了解字段的概念,是必不可少的。毕竟无论是es还是传统的数据库,都无法弱化字段的类型。 背景知识 在Es中,字段的类型很关...

2318

扫码关注云+社区