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 条评论
登录 后参与评论

相关文章

来自专栏Modeng的专栏

Vue一个案例引发「动画」的使用总结

项目开发中动画有着很重要的作用,而且也是用到的地方非常多,例如:鼠标的进入离开,弹窗效果,组件的显示隐藏,列表的切换等等,可以说我们网页上的动画无处不在,也有人...

1153
来自专栏前端黑板报

居中“魔法”总结

作为一个前端程序员,各种居中的需求会经常遇到,比如说文本居中,水平居中,垂直居中,浮动元素居中等等。掌握一些居中的常用方法也是作为前端攻城师必不可少的技能。 因...

22010
来自专栏个人随笔

列表,表格与媒体元素

一.列表   列表就是信息资源的一种展示形式  1.列表及其应用    1)无序列表      无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无...

31810
来自专栏肖蕾的博客

解决安卓中XML文件声明高度 宽度无效的问题

1023
来自专栏Python爱好者

Python绘制分形树(一)

2438
来自专栏lgp20151222

脱离文档流两操作,float和position:absolute的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行;

772
来自专栏编程

CSS布局之垂直居中一

CSS中的水平居中是非常容易实现的,比如对于行内元素,将它的父级元素设置text-align为center既可。 ? 对于块级元素,设置它的margin:aut...

1927
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

1633
来自专栏lhyt前端之路

一点点css的基础原理总结0.前言1.包含块(CB)2.宽和高3.BFC4.行内元素5. 垂直方向的margin6.盒子模型

CSS属性非常多,如果说死记的话,是不容易的,我们了解他的原理,其他不常见的属性都是手到擒来

652
来自专栏前端知识分享

第2天:HTML常用标签

一、超链接a href:www.baidu.com(跳转页面);id名(锚点跳到相应div位置);01.rar(压缩包) target:_blank(新窗口打...

1611

扫码关注云+社区