子类选择器和后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>子类选择器和后代选择器</title>
</head>
<body>
	<div id="father">
		<div>11</div>
		<div>22
			<p>111</p>
			<p>222</p>
			<p>333</p>
		</div>
		<div>33</div>
		<div>44</div>
		<div>55</div>
		<p>66</p>
		<p>77</p>
		<p>88</p>
	</div>
	<script src="jquery-1.12.4.js"></script>
	<script>
		$(function(){
			// $("s1,s2")//并集选择器
			// $("s1 s2")//后代选择器
			// $("s1>s2")//子带选择器
			// $("li.green")
			// $("s1s2")//交集选择器
			$("#father p").css("backgroundColor","red");
		});
	</script>
</body>
</html>

  

原文地址:https://www.cnblogs.com/luwn/p/12705414.html

时间: 04-15

子类选择器和后代选择器的相关文章

CSS的子选择器与后代选择器的区别

子选择器 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑器中的代码: .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li(水果.蔬菜)加入红色实线边框. <style type="text/css"> .food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ </style

子选择器、后代选择器和通用选择器以及伪选择器

子选择器(>) .food>li{border:1px solid red;}后代选择器(空格) 包含选择器,即加入空格,用于选择指定标签元素下的后辈元素.如右侧代码编辑器中的代码: .first span{color:red;} 这行代码会使第一段文字内容中的"胆小如鼠"字体颜色变为红色. 请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代.而后代选择器是作用于所有子后代元素.后代选择器通

子选择器与后代选择器的区别

子选择器(child selector)仅是指它的直接后代,即第一代后代,它通过“>”进行选择. 后代选择器是作用于所有子孙元素,它通过空格来进行选择. 总结:>作用于元素的第一代后代,空格作用于元素的所有后代.

Web全栈-后代选择器和子类选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style> /* div p{ color: red; } */ /* #identity p{ color: red; } */ /* .para p{ color: blue; } */ /* #identit

CSS之后代选择器与多类选择器

<新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子元素选择器 ----CSS 相邻兄弟选择器 那么问题来了,什么时候需要用到后代选择器嘞?假设你需要为p元素中的span元素(.A类)设置特殊样式,可以用后代选择器选择该元素: /*方式1*/p span{...}/*方式2*/p .A{...} 注意,上述代码的两个选择器间以空格空格空格分隔.另外,后代选择器

CSS 后代选择器

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

CSS系列之后代选择器、子选择器和相邻兄弟选择器

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

Web全栈-后代选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style> /* div p{ color: red; } */ /* #identity p{ color: red; } */ /* .para p{ color: blue; } */ /* #identit

CSS后代选择器,子选择器和相邻兄弟选择器

平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li之间用空格隔开]子选择器的标识为:> 如:ul>li{width:150px;}[ul和li之间用>隔开]相邻兄弟选择器的标识为:+ 如:h1 + p {margin-top:50px;}[h1和p之间用+隔开] ②功能不一样:后代选择器(descendant selector),又称为包含

CSS3后代选择器和同级选择器简介和实例

CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器(或称组合选择器), 分为后代选择器(Descendant combinator/Child combinators)和同级选择器(Sibling combinators): 其中后代选择器分以下3个: 1. 空格.div p: 表示p是div的后代元素, div是p的祖先.该选择器选择所有div下的p后代元素. 2. 箭头(>).表示直系关系.div > p 表示div的儿子辈的元素. 3. 星号(*).表