子类选择器和后代选择器

<!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

时间: 2024-10-31 14:25:53

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

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 组合选择符:后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器

CSS 组合选择符 CSS 组合选择符 在 CSS3 中包含了四种组合方式:CSS组合选择符包括各种简单选择符的组合方式. 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选择器 后代选择器用于选取某元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中: 实例 divp{background-color:yellow; } 子元素选择器 与后代选择器相比,子元素选择器(Child sel