开发者社区> yuanrengu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS中的选择器总结

简介: 主要应用的选择器就三类:元素选择器,ID选择器,类选择器。 选择器的结合关系有三种:后代结合、子元素结合、相邻兄弟结合。 元素选择器就是以html文档中的标准元素标签作为选择器的标志的。如: h1 {color:red; font-size:14px;}   ID选择器,以元素的唯一ID作为选择器标志。
+关注继续查看

主要应用的选择器就三类:元素选择器,ID选择器,类选择器。

选择器的结合关系有三种:后代结合、子元素结合、相邻兄弟结合。


元素选择器就是以html文档中的标准元素标签作为选择器的标志的。如:

h1 {color:red; font-size:14px;}

 

ID选择器,以元素的唯一ID作为选择器标志。如:

#red {color:red;}
#green {color:green;}

 

类选择器,以元素的类(class)作为选择器标志。如:

.center {text-align: center}

 

从选择器的结合关系来看:

后代结合,就是两个选择器之间用空格分开。如 “A B”,表示A所选择的元素中包含的B所选择的元素。如:

.fancy td {
	color: #f60;
	background: #666;
	}

上述例子,表示fancy类的元素中包含的td元素。注意:这个包含不一定是相邻子代包含,可以是孙代包含,故名后代结合。


子元素结合,两个选择器之间用“>”隔开。如 “A > B”,表示A所选择元素的相邻子代元素中B所选择的元素。如:

h1 > strong {color:red;}
<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

上述例子,在第一句中应用了该样式,在第二句中没有。因为第二句中 h1 和 strong 不是相邻子元素关系。


相邻兄弟结合,两个选择器之间用 “+” 隔开。如 “A + B”,表示A和B为相邻元素,并且有同一个父元素,即他俩为兄弟元素。该选择器选择的是B元素。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

上例中,第二个p元素没有应用样式,而第一个应用了。


知道了选择器种类以及选择器的结合方式,就会创造出许多种神奇应用了。如:

html > body table + ul {margin-top:20px;}

这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

 

转自:http://blog.csdn.net/huangxy10/article/details/8174880


img_e00999465d1c2c1b02df587a3ec9c13d.jpg
微信公众号: 猿人谷
如果您认为阅读这篇博客让您有些收获,不妨点击一下右下角的【推荐】
如果您希望与我交流互动,欢迎关注微信公众号
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS 选择器总结
CSS 是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。
34 0
CSS选择器优先级(特异性)
CSS选择器优先级(特异性)
13 0
CSS选择器优先级(特异性)
CSS选择器优先级(特异性)
8 0
CSS(一)概述、选择器、选择器优先级
CSS(一)概述、选择器、选择器优先级
40 0
CSS选择器优先级(特异性)
CSS选择器优先级(特异性)
63 0
面试官:请说下CSS选择器优先级
面试官:请说下CSS选择器优先级
82 0
真正理解"CSS选择器的优先级"
![img_0236](https://user-images.githubusercontent.com/4645261/37966669-cd227ab0-31fb-11e8-8212-415a54ece5d1.JPG) > 题图、摄影:锦此 当我们在讨论CSS选择器优先级的时候,我们再讨论什么? 其实很多人都对此有点模糊,那我换个方式问: **一个CSS属性的最终值是怎么来
13142 0
css知多少(6)——选择器的优先级
原文:css知多少(6)——选择器的优先级 1. 引言   上一节《css知多少(5)——选择器》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。      上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一样,这里的到底听从谁的命令?   上面还是比较简单的,下面在来一个复杂的:      上图中的该显示成什么颜色呢? 2. 特指度   要解决以上问题,我们需要引入一个概念——特指度(specificity)。
888 0
+关注
529
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载