基本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“并集”选择器:

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

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

<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;}

css 的基本选择器,复合选择器,后代选择器相关推荐

  1. HTML连载18-id选择器与class区别class选择器使用思路后代选择器

    一.id选择器和classable选择器的区别 选择器 CSS中的开头 HTML标签可以绑定几个 是否可重复 用途 id选择器 # 仅能一个 不可以重复(一个标签里仅有一个) 一般情况下是给JS用的, ...

  2. html后代选择器的语法,后代选择器 | Descendant selectors

    后代选择器 | Descendant selectors 后代组合因子 --通常是通过一个单一的sapce()字符来表示--它结合了两个选择器,且如果第二个选择器所选择的元素的一些祖先元素为第一选择器 ...

  3. js原生后代选择器_jQuery的后代选择器ancestor descendant介绍和示例解析

    jQuery的ancestor descendant选择器(后代选择器)用于匹配ancestor元素内所有的descendant元素,将其封装为jQuery对象并返回. 注意:选择器descendan ...

  4. CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器

    CSS复合选择器 建立在基础选择器上,对基本选择器进行组合形成的 可以更准确.更高效的选择目标元素(标签) 包含:后代选择器.子选择器.并集选择器.伪类选择器 一.后代选择器 又称为包含选择器,可以选 ...

  5. css复合选择器(后代选择器、子代选择器、并集选择器、链接伪类选择器、:focus选择器)

    什么是复合选择器? 在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签 ...

  6. HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器

    复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器 交集选择器由两个选择器直接构成,其中第一个 ...

  7. CSS复合选择器:后代选择器

    复合选择器:后代选择器 格式:元素1 元素2 { 样式内容} 1.后代选择器中外层是父级,内层是子级,子级可以一直嵌套 2.元素1 和元素2 之间用空格隔开 3.元素1 和元素2 是任意的基础选择器, ...

  8. CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图

    CSS基本知识之复合选择器.元素显示模式.背景图片位置,精灵图 一.复合选择器 在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进 ...

  9. CSS 2 emmet语法 复合选择器 元素显示模式

    目录 Emmet语法 1.1快速生成HTML结构标签 1.2快速生成CSS样式语法 CSS的复合选择器 1.1什么是复合选择器 1.2后代选择器(重要) 1.3子选择器(重要) 1.4并集选择器(重要 ...

  10. CSS(二)——复合选择器、元素显示模式、背景、三大特性

    文章目录 *1.Emmet语法 *1.1 快速生成HTML结构语法 *1.2 快速生成CSS样式语法 1.CSS 的复合选择器 1.1 什么是复合选择器 1.2 后代选择器 (重要) 1.3子选择器( ...

最新文章

  1. react-native填坑--react-navigation
  2. ubuntu环境下搭建Ethereum测试私链及JSON-RPC合约交互
  3. 【渝粤教育】国家开放大学2019年春季 2114人体解剖生理学 参考试题
  4. ActiveReports 报表控件官方中文新手教程 (1)-安装、激活以及产品资源
  5. 俄罗斯方块-C语言-详注版
  6. 无setup.exe情况下安装mysql5.7.28(win10)
  7. 现在输入 n 个数字, 以逗号, 分开; 然后可选择升或者 降序排序;
  8. oracle创建默认序列号,PLS-00103:为序列号oracle创建触发器(PLS-00103: Create trigger for sequence number oracle)...
  9. element的loading的蒙版导致滚动条消失,页面抖动
  10. java/php/net/pythont房产信息管理系统设计
  11. 电子表整点报时怎么取消_双11红包雨入口在哪 双十一秒杀券怎么抢
  12. AutoGluon-windows学习笔记(1)
  13. 短视频直播平台系统app开发搭建方案,助力企业搭建细分领域短视频app,开发多种短视频变现模式
  14. SSD固态硬盘和HDD机械硬盘的区别
  15. 12306中/otn/HttpZF/logdevice?algID 与 /otn/HttpZF/GetJS 的关系
  16. 文本分割之垂直投影法基于OpenCV(python)的实现
  17. (18)ROS学习-TF坐标变换之静态坐标变换
  18. rtsp 客户端请求视频的时候顺便填写输入用户名和密码的格式
  19. ADIS16400/ADIS16405带磁力计的三轴惯性传感器(1)
  20. vue-resource ajax跨域,ajax 跨域请求 vue-resource jsonp跨域

热门文章

  1. 小职员年终领悟:职场要受宠 做事需揣摩老板心
  2. 【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的布局
  3. mysql节假日判定_是否是工作日和节假日判定
  4. Android 代码混淆Proguard
  5. grub原理及使用详解
  6. css3动画之圆形运动轨迹
  7. seaJS简介与使用
  8. python报考软考哪个比较好_软考高级考哪个好?
  9. iOS 去除TabBar顶部黑色线的方法
  10. 文章编辑系统的设计与实现