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
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Redis文件事件&时间事件处理机制
- Redis持久化策略
- Redis二进制安全的原理
- 面试必备 Vue 知识点
- 数据传输 | mysqldiff/mysqldbcompare 实现 DTLE 自动化测试
- CPU有个禁区,内核权限也无法进入!
- 分布式 | DBLE 3.20.07.0 来啦!
- C语言三剑客之《C陷阱与缺陷》一书精华提炼
- Linux进程间通信(上)之管道、消息队列实践
- FPGA上电时序
- 更新Kubernetes APIServer证书
- R语言连续时间马尔科夫链模拟案例 Markov Chains
- 如何用R语言在机器学习中建立集成模型?
- 从零开始Kubernetes Operator
- TiKV源码解析系列文章(二十)Region Split源码解析