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

基本CSS选择器,复合选择器,后代选择器

简介:
+关注继续查看

基本CSS选择器有标记选择器、类别选择器、ID选择器3种
1。标记选择器
    每一种HTML标记的名称都可以作为相应的标记选择器的名称,如h1,p,等等
2。类别选择器
    类别选择器的名称可以由用户自定义
   格式如下:.class{color:green;font-size:20px;}
3。ID选择器
    与类别选择器相试
   格式如下:#id{color:green;font-size:20px;}



复合选择器:就是两个或者多个基本选择器,通过不同方式连接而成的选择器
有两种情况:”交集“选择器、“并集”选择器 
1。“交集”选择器:由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,其中第一必须是标记选择器,第二个必须是类别选择器或者ID选择器,两个选择器之间不能有空格,必须连续书写
如:h3.class{color:red;font-size:23px;}

2。“并集”选择器:同时选中各个基本选择器所选择的范围,任何形式的选择器都可以,并集选择器是多个选择器通过逗号连接而成的,
格式如:h1,h2,h3{color:red;font-size:23px;}

后代选择器:
后代选择器书写方法:把外层的标记写在前面,内层的标记写在后面,之间用空格分隔,当标记发生嵌套时,内层的标记就成为外层标记的后代了
举个列子

<html>
<head>
<title>后代选择器</title>
<style type="text/css">
p span
{
   color
:red
}

span
{
  color
:blue;
}

</style>
</head>
<body>
<p>嵌套<span>用CSS</span>标记的方法</p>嵌套之外的<span>标记</span>不生效
</body>
</html>

效果是:“用CSS”的显示红色,其他用<span>包围起来的是兰色
后代选择器产生的影响不仅限于元素的“直接后代”,而且会影响到它的“各级后代”
子选择器:也就是只有对直接后代有影响的选择器,而对“孙子”以及对个层的后代不产生作用。

格式如下:p>span{color:blue;}




本文转自 风雨萧条 51CTO博客,原文链接:http://blog.51cto.com/1095221645/1792385,如需转载请自行联系原作者

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

相关文章
【Vue.js 入门与实战】--过滤器-Vue中全局过滤器的基本使用
一、 过滤器的概念 二、 过滤器的定义 三、 过滤器的基本使用
14 0
CSS——CSS复合选择器(重中之重 ☆)
CSS——CSS复合选择器(重中之重 ☆)
12 0
【WSN通信】基于Matlab实现LEACH融合树多跳传输协议
【WSN通信】基于Matlab实现LEACH融合树多跳传输协议
33 0
CSS复合选择器
复合选择器就是两个或多个基本选择器通过不同方式组合而成的选择器,可以实现更强、更方便的选择功能
80 0
PolarDB-X 1.0-API参考-1.0(2019版本)-备份和恢复-StartRestore
调用StartRestore接口启动基于备份的恢复任务。
39 0
Dragonfly Nydus——下一代容器格式的一种实现
容器技术从1979年发展至今已经超过40年,docker 只能说是目前为止,其中一种比较著名而流行的实现。可以说,docker 解决了应用分发的难题,为日后 kubernetes 的流行奠定了基础。 但是,俗话说得好,勇士战胜恶龙之日,自身亦化作恶龙。不管是 Docker 公司后来各种神操作(把项目改名 Moby ,docker swarm 的弱鸡编排)也好,CoreOS 的崛起也罢。开源世界的战争,是一种技术标准的全球话语权争夺,这种争夺远比你想象的要残酷。
8417 0
13688
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载