css——子代与后代选择器

一直都以为,子代选择器与后代选择器作用是一样的,都是选择一个元素下面的子元素,直到今天才明白: 1.子代选择器(用<连接):ul>li 子选择器仅仅选择ul包围的子元素中的 li元素,不包括孙元素.曾孙元素等: 2.后代选择器(用空格连接):ul li 后代选择器是选择ul包围的所有元素中的所有li元素,包括子元素.孙元素.曾孙元素等:…

后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器子选择器:子选择器只是父选择器的一级子元素,使用">"符号链接选择器相邻兄弟选择器,是拥有相同父元素,且两个元素相邻,使用"+"符号链接 1. 后代选择器比如如下html代码,em是h1的后代元素,如下css样式这样写,只会影响h1中的em标签的内容变为红色,不会影响p中em的内容 css: h1 em {color:red…

css 串联选择器和后代选择器

串联选择器:作用在同一个标签上 <div class=”a” id ="qq"><span>look at the color</span></div> css: #qq.a{ …. } 后代选择器:作用在不同标签上 <div id ="qq"><span class=”a”>look at the color</span></div> css: #qq .a{ } 注…

认识CSS中css引入方式、选择器、文本样式设置以及显示模式

前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部样式表,外部样式表. 行内样式:通过标签的style属性设定样式,基本语法:<标签名 style="属性1:属性值1:属性2:属性值2:...">内容</标签名>. <!DOCTYPE html> <html> <head> &l…

CSS学习笔记之选择器

目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素选择器最常见的 CSS 选择器莫过于元素选择器,换言之,HTML 文档中的元素是最基本的选择器 body {color:black;} h1 {color:gray;} p {color:white;} 2.继承根据 CSS 规则,子元素将会继承最高级元素所拥有的属性.例如,如果在 body 元…

HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

一.回顾内容前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层:提供用户和界面的交互二.CSS(层叠样式表) 1. CSS的概念及其介绍CSS 指层叠样式表 (Cascading Style Sheets)作用:美化HTML结构,重点:css可以很好的将结构内容和表现进行分离.2. css的三种表现形式(引入方法)css的语法结构:选择器{属性:值;属性:值;…

css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器

高级选择器: 后代选择器子代选择器并集选择器交集选择器一.后代选择器: 使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子) 也就是说,box类下的所有span标签字体颜色都被设置为了红色 .box span{ color:red; } 二.子代选择器: 使用>表示子代选择器. 之选中box类下第一层的span标签设置为红色 .box>span{ color:red; } 三.并集选择器: 多个选择器之间用逗号隔开,表示选中页面中的多个标签, 一些共性的元素可以使用并集选…

子代选择器（>）后代选择器（' '）的区别

子代选择器是指紧接着父级的那个标签,如:container>a指的是紧接着container后面的第一个a(儿子级别的,孙子或者之后的a是不能生效的) 后代选择器是用空格分开的,如:container a指的是continent里面所有的a(儿子,孙子,重孙子……都会生效) 详细说明:http://jingyan.baidu.com/article/b0b63dbfee7fe64a48307083.html…

CSS后代选择器可能的错误认识

一.关于类选择器的一个问题 CSS代码: .red { color: red; } .green { color: green; } HTML代码: <div class="red"><div class="green"><p>1. 颜色是?</p></div></div> <div class="green"><div class="red&qu…

CSS 后代选择器

后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用. 举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写: h1 em {color:red;} 上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色.其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中: <h1>Th…