高级选择器:

  • 后代选择器
  • 子代选择器
  • 并集选择器
  • 交集选择器

一、后代选择器:

  使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子)

  也就是说,box类下的所有span标签 字体颜色都被设置为了红色

.box  span{

  color:red;  

}

二、子代选择器:

  使用>表示子代选择器. 之选中box类下第一层的span标签设置为红色

.box>span{
color:red;
}

三、并集选择器:

  多个选择器之间用逗号隔开,表示选中页面中的多个标签,  一些共性的元素可以使用并集选择器

  所有的div和a中的字体同时被设置成了红色,

div,a{
color:red;
}

四、交集选择器:

  使用交集选择器,第一项必须是标签选择器,第二项必须是类选择器 比如:

  在所有div中选中类名为active的div并设置背景颜色为红色.

div.active{
background-color:red;
}

css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器的更多相关文章

  1. 0013 CSS复合选择器:后代、子代、交集、并集、超链接伪类

    重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...

  2. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  3. css中那些容易被我们程序猿所忽略的选择器

    css中那些容易被我们程序猿所忽略的选择器 作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了.但是,用JS解 ...

  4. 《CSS权威指南(第三版)》---第二章 选择器

    本章的主要内容是,怎么获取文档中的元素给予渲染: 1.元素选择器: 2.ID选择器: 3.CLSSS选择器: 4.通配选择器:*; 5.属性选择器:selector[] 6.部分属性选择器: sele ...

  5. CSS 交集选择器和并集选择器

    交集选择器是and 也就是要同时满足 且只能交2个只能交2个只能交2个,第一个是标记,第二个是class或者id,之间不可以有空格 eg:  span.small-height 并集选择器是or,也就 ...

  6. HTML连载19-子元素选择器&交集选择器

    一.子元素选择器 1.定义:找到指定标签中所有特定的直接子元素,然后设置属性 2.格式: 标签名称一>标签名称2{ 属性:值: } 3.释义:先找到叫做“标签名称1”的标签,然后在这个标签中查找 ...

  7. 《精通CSS:高级Web标准解决方案》学习笔记(上)

    鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...

  8. 精通CSS:高级Web标准解决方式(第2版)

    精通CSS:高级Web标准解决方式(第2版) 跳转至: 导航. 搜索 层叠重要度:(也就是说.用户!important能够覆盖inline style) !important.用户>作者.最后是 ...

  9. 精通CSS:高级Web标准解决方案(第二版) 初读笔记

    2.1 常用的选择器 1. 类型选择器  p { color: black; } 2. 后代选择器  blockquote p { padding-left: 2em; } 3. ID选择器  #in ...

随机推荐

  1. Ionic2 启动加载优化总结

    1. ionic2通过ionic serve生成的main.js大于4M,必须先build才能部署 npm run ionic:build --prod 之后main.js缩小为大概100K+ 2. ...

  2. centos7安装配置sql server 2017 linux教程

    一.安装教程 https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-docker https://docs.mic ...

  3. python 爬虫 黑科技

    1.最基本的抓站 import urllib2 content = urllib2.urlopen('http://XXXX').read() 2.使用代理服务器 这在某些情况下比较有用,比如IP被封 ...

  4. P4915 帕秋莉的魔导书

    题目链接 题意分析 当前等级为\(x\)的魔法书会对等级在\([x,inf]\)的所有人造成\(y\)的影响 所以除了求平均值之外 就是区间修改区间求和 需要使用动态开点 + 标记永久化 需要注意的是 ...

  5. leetcode-8-字符串转整数 (atoi)

    题目描述: 实现 atoi,将字符串转为整数. 在找到第一个非空字符之前,需要移除掉字符串中的空格字符.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字符 ...

  6. 【Quartz】基本原理

    1 核心概念 1.1    核心元素 (1)Scheduler 任务调度器,是Quartz框架的核心,负责管理其他组件. (2)Trigger 触发器,用于定义任务调度的时间规则,有SimpleTri ...

  7. linux下安装gcc详解

    1.了解一下gcc 目前,GCC可以用来编译C/C++.FORTRAN.JAVA.OBJC.ADA等语言的程序,可根据需要选择安装支持的语言.我自己linux上是4.1.2版本,是不支持openMP的 ...

  8. sqlalchemy的外键与relationship查询

    https://www.cnblogs.com/goldsunshine/p/9269880.html 讲的很详细. http://www.bjhee.com/flask-ext4.html 思诚之道 ...

  9. 分布问题(二元,多元变量分布,Beta,Dir)

    这涉及到数学的概率问题. 二元变量分布:       伯努利分布,就是0-1分布(比如一次抛硬币,正面朝上概率) 那么一次抛硬币的概率分布如下: 假设训练数据如下: 那么根据最大似然估计(MLE),我 ...

  10. C#通过反射执行C#dll所有函数

    C# 反射(Reflection) 反射指程序可以访问.检测和修改它本身状态或行为的一种能力. 程序集包含模块,而模块包含类型,类型又包含成员.反射则提供了封装程序集.模块和类型的对象. 您可以使用反 ...