HTML+CSS学习笔记（一）--组合选择符 + 分组 和 嵌套 选择器

最新推荐文章于 2022-12-06 19:23:03 发布
最新推荐文章于 2022-12-06 19:23:03 发布
阅读量620 收藏 3
点赞数 1
文章标签： html css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45889834/article/details/108175935
版权

前几天花了几十刀买了一本 CSS+DIV 的书准备好好研究，哪里知道会被里面的文字困住了；什么相邻选择器？什么兄弟选择器？还让我了解到一个英文单字
“Sibling”
Sibling
不过，如果真的翻译成“兄弟” 那么就可能掉进中文漩涡里。据理解 Sibling 应该翻译成“兄弟姐妹”。虽然找到正确翻译，可我还是没看懂作者的**“工程中文”** ，只好自己上网找找。研究几个网站后，觉得**“菜鸟教程”**的写法比较能让我理解。所以，我把他们的资料整理一下，写个注解，贴在这里让自己备用，也分享给需要的朋友！（我把部分说明放在程式里的注解）

后代选择器(以空格分隔)

<!DOCTYPE html>
<html>
<head>
	<title>后代选择器</title>
	<style type="text/css">
		div{	margin: 0 auto;
				text-align: left;}

		.Cent {	width: 400px;
				border: 1px dashed #CC0099;
				padding: 10px 15px;	}
		span{font-size: 30px;}
		
		div p{	background-color:yellow;}
	</style>
</head>
<body>

	菜鸟教程(runoob.com)
    <span>后代选择器</span> <br>
  	后代选择器用于选取某元素的后代元素。<br>
	以下实例选取所有 &#60;p&#62; 元素插入到 &#60;div&#62; 元素中: <br>
<div class="Cent">	
 	div p
		{
			background-color:yellow;
		}
</div>
	
<div>
	<p>段落 1。 在 div 中。</p>
	<p>段落 2。 在 div 中。</p>
</div>
	<p>段落 3。不在 div 中。</p>
	<p>段落 4。不在 div 中。</p>		
</body>
</html>

执行结果：
在这里插入图片描述

子元素选择器(以大于号分隔）

<!DOCTYPE html>
<html>
<head>
	<title>子元素选择器</title>
	<style type="text/css">
		div{
				margin: 0 auto;
				text-align: left;
			}

		.Cent {
			width: 400px;
			border: 1px dashed #CC0099;
			padding: 10px 15px;
			}

		div>p
			{
				background-color:yellow;
			}
		span{font-size: 30px;}

	</style>
</head>
<body>

	菜鸟教程(runoob.com)<br>
  <span>子元素选择器</span> <br>
  	
	与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。<br><br>
	以下实例选择了 &#60;div&#62; 元素中所有直接子元素 &#60;p&#62;：<br>
 	<div class="Cent">	
	 	div &#62; p
			{
				background-color:yellow;
			}
	</div>
	
	<h1>Welcome to My Homepage</h1>

	<div>
		<h2>My name is Donald</h2>
		<p>I live in Duckburg.</p>
	</div>
	<!-- p 在 div 的下一层，则会被执行 -->

	<div>
		<span><p>I will not be styled.</p></span>
	</div>
	<!-- p 在 div 的中间隔了一个 span，就不会被执行 -->

	<p>My best friend is Mickey.</p>
		<!-- p 不在 div 里面，就不会被执行 -->	

</body>
</html>

执行结果：
在这里插入图片描述

相邻兄弟选择器（以加号分隔）

<!DOCTYPE html>
<html>
<head>
	<title>相邻兄弟选择器</title>
	<style type="text/css">
		div{
				margin: 0 auto;
				text-align: left;
			}

		.Cent {
			width: 400px;
			border: 1px dashed #CC0099;
			padding: 10px 15px;
			}
		span{font-size: 30px;}
		div+p
			{
				background-color:yellow;
			}
	</style>
</head>
<body>

	菜鸟教程(runoob.com)<br>
  <span>相邻兄弟选择器</span> <br>
 
	相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。<br>
	如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。 	<br>
	以下实例选取了所有位于 &#60;div&#62; 元素后的第一个 &#60;p&#62; 元素:

 	<div class="Cent">	
	 	div + p
		{
			background-color:yellow;
		}
	</div>
	<h1>文章标题</h1>
	<div>
		<h2>DIV 内部标题</h2>
		<p>DIV 内部段落。</p>
	</div>

	<p>DIV 之后的第一个 P 元素。</p>
	<!-- div 存在，则近邻着的 p 在会被反应 -->

	<p>DIV 之后的第二个 P 元素。</p>
	<!-- div 存在，但是中间有间隔，则被间隔的 p 不会被影响 -->

	<h1>Welcome to My Homepage</h1>
</body>
</html>

执行结果：
在这里插入图片描述

后续兄弟选择器（以破折号分隔）

<!DOCTYPE html>
<html>
<head>
	<title>后续兄弟选择器</title>
	<style type="text/css">
		div{
				margin: 0 auto;
				text-align: left;
			}

		.Cent {
			width: 400px;
			border: 1px dashed #CC0099;
			padding: 10px 15px;
			}

		div~p
			{
				background-color:yellow;
			}
		span{font-size: 30px;}

	</style>
</head>
<body>

	菜鸟教程(runoob.com)<br>
  <span>后续兄弟选择器</span> <br>

	后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。<br>
	以下实例选取了所有 &#60;div&#62; 元素之后的所有相邻兄弟元素 &#60;p&#62; : <br>

	<div class="Cent">	
	 	div ~ p
			{
				background-color:yellow;
			}
	</div>

	<h1>文章标题</h1>

	<div>
		<h2>DIV 内部标题</h2>
		<p>DIV 内部段落。</p>
	</div>

	<p>DIV 之后的第一个 P 元素。</p>
	<!-- div 存在，则近邻着的 p 在会被反应 -->

	<p>DIV 之后的第二个 P 元素。</p>
	<!-- div 存在，但是中间有间隔，则被间隔的 p 不会被影响 -->

	<h1>Welcome to My Homepage</h1>

	<p>DIV 之后的第三个 P 元素。（中间有被隔开)</p>
	<!-- div 存在，但是中间有间隔，则被间隔的 p 不会被影响 -->

</body>
</html>

执行结果：
后续兄弟选择器

分组选择器

<!DOCTYPE html>
<html>
<head>
	<title>2_2.x4.html</title>
	<style type="text/css">
		div{
				margin: 0 auto;
				text-align: left;
			}

		.Cent {
			width: 400px;
			border: 1px dashed #CC0099;
			padding: 10px 15px;
			}
		span{font-size: 30px;}

		h1,h2,p { color:green;}

	</style>
</head>
<body>

	菜鸟教程(runoob.com)<br>
  <span>分组选择器</span> <br>
 
	在样式表中有很多具有相同样式的元素。<br>

	为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分隔。	<br>

    在下面的例子中，我们对以上代码使用分组选择器：</h3>

	<div class="Cent">	
		h1 { color:green;}<br>
 		h2 { color:green;}<br>
 	 	p { color:green;}<br>
 	 	 集合成<br>
	 	<h3>h1,h2,p { color:green;}</h3> 同样都颜色
	</div>

	<h1>Hello World! h1</h1>
	<h2>Smaller heading! h2</h2>
	<p>This is a paragraph. p</p>
	<!-- 这三列的颜色被定义成一样的 -->
</body>
</html>

执行结果：
在这里插入图片描述

嵌套选择器

<!DOCTYPE html>
<html>
<head>
	<title>2_2.x4.html</title>
	<style type="text/css">
		div{
				margin: 0 auto;
				text-align: left;
			}
		.Cent {
			width: 400px;
			border: 1px dashed #CC0099;
			padding: 10px 15px;
			}
		span{font-size: 20px;}

		p	{
				color:blue;
				text-align:center;
			}
		.marked	{
				background-color:red;
			}
		.marked p{
				color:white;
			}
		p.marked{
		    text-decoration:underline;
			}

	</style>
</head>
<body>

	菜鸟教程(runoob.com)<br>
  <span> <strong>嵌套选择器</strong></span> <br>
	它可能适用于选择器内部的选择器的样式。<br>
	在下面的例子设置了三个样式：<br>
	<ul><li><span>p{ }</span>: 为所有 <strong>p</strong> 元素指定一个样式。</li>
	<li><span >.marked{ }</span>: 为所有 <strong>class="marked"</strong> 的元素指定一个样式。</li>
	<li><span >.marked p{ }</span>: 为所有 <strong>class="marked"</strong> 元素内的 <strong>p</strong> 元素指定一个样式。</li>
	<li><span >p.marked{ }</span>: 为所有 <strong>class="marked"</strong> 的 <strong>p</strong> 元素指定一个样式。</li>

	</ul>

	<div class="Cent">	
		p	{
				color:blue;
				text-align:center;
			}<br>
		.marked	{
				background-color:red;
			}<br>
		.marked p{
				color:white;
			}<br>
		p.marked{
		    text-decoration:underline;
			}<br>
	</div>

	<p>这个段落是蓝色文本，居中对齐。(p 蓝色字)</p>
	<div class="marked">
		<p>这个段落不是蓝色文本。(.marked p -- 白色文字, 其中 .marked 定义红色背景)</p>
	</div>
	<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
	
	<p class="marked">带下划线的 p 段落。(p.marked --下划线， p 定义蓝色字)</p>
	<!--  -->
</body>
</html>

执行结果：
在这里插入图片描述
以上内容若是有版权问题，请告知，我就会把这些技巧撤下，留着自己用！

菜鸟教程的网站在这里
https://www.runoob.com/css/css-grouping-nesting.html

READ LEE
关注
HTML+CSS学习笔记（温故而知新）
qq_64510496的博客
07-14 177
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTML+CSS学习笔记
shsjjjs的博客
10-21 765
HTML+CSS学习笔记
html5 嵌套选择器,CSS 分组 和 嵌套 选择器
weixin_36201438的博客
06-03 284
CSS 分组 和 嵌套 选择器所谓分组选择器就是当多个选择器对应的元素需要相同的样式时可以将多个选择器以逗号分隔放在一条样式声明的前面达到多个选择器多条样式声明相同的效果.所谓嵌套选择器就是实现对选择器内部的选择器对应的元素实现样式的设置.css在样式表中有很多具有相同样式的元素。h1{color:green;}h2{color:green;}p{color:green;}为了尽量减少代码，你可以...
HTML中组合选择器之间的关系,css组合选择符
weixin_31349647的博客
06-04 214
组合选择符说明了两个选择器之间的关系CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方式:后代选择器(以空格分隔)子元素选择器(以大于号分隔)相邻兄弟选择器(以加号分隔)普通兄弟选择器(以破折号分隔)后代选择器后代选择器用于选取某元素的后代元素，以空格分隔下面举个栗子，下面的代码会把div元素后代的p元素背景变为粉红色html>divp{backgr...
html组合选择器代码,css选择器设置标签样式的实例代码
weixin_35443436的博客
06-03 390
css选择器在html标签上设置style可以给标签设置属性：啊啊啊我们还可以通过标签里设置选择器，这样每种样式只需要写一遍Title具体的选择器有很多种：1、通过id来复制样式#i1{background-color: #2459a2;height: 48px;}在body里的标签这样用：但id不能写多个，所以还是不能多用2、通过class来复制：/*class选择器：用class=c1来就可以...
html5嵌套选择器,详解css常用选择器
weixin_36364248的博客
06-03 299
导入外部css样式表的方法使用link标签导入外部css样式表在样式表中import(导入)外部样式表@import url("/crazy-html5/06css/css/demo01.css");使用内部样式表内部样式表只能作用于某一个网页，定义方式为在head头部添加style标签，在style标签中即可添加页面样式。table {background: #003366;}选择器知识点元素属...
html5嵌套选择器,CSS伪元素选择器
weixin_34957720的博客
06-03 253
CSS伪元素选择器1.first-line　　选择文本的首行　　无视嵌套标签比如：div111111/divdivp111111//divstylediv:first-line{color:red;}/style以上两个文本内容的颜色都会变成红色。2.first-letter　　选择文本的首字母 无视嵌套标签3.::selection 选择被用户选中的部分或者处于高亮状态的部分 不无视嵌套标签举...
html-css-learning：HTML + CSS学习笔记
03-03
在这个“html-css-learning”学习笔记中，我们将深入探讨这两个领域的关键概念和实践技巧。 1. **HTML基础知识** - **标签与元素**：HTML由一系列标签组成，每个标签都有其特定含义。例如，`<html>`是文档的根元素...
JavaSE html+CSS基础笔记归纳.zip
08-08
通过选择器（如id、class或元素类型），CSS可以设置颜色、字体、间距、位置等样式属性。CSS3引入了更多新特性，如伪类、媒体查询（实现响应式设计）、过渡（transition）、动画（animation）和Flexbox（弹性盒模型）...
CSS学习笔记day02 --复合选择器
最新发布
m0_48625424的博客
12-06 427
复合选择器
html5群组选择器,选择器分组
weixin_39595430的博客
06-03 184
假如巴望 h2 元素与段落都有灰色。为到达这个指标，最容易的做法是使用以下声名：h2, p {color:gray;}将 h2 与 p 决意器放在规定左边，然后用逗号分隔隔离分散，就定义了一个划定。其右侧的款式(color:gray;)将使用到这两个决意器所援用的元素。逗号通知涉猎器，规则中囊括两个一致的决意器。如果没有这个逗号，那末划定规矩的寄义将纯粹差异。拜见子弟决定器。梗概将任意多个抉择器分...
CSS组合选择符
angyinvc427553的博客
07-26 67
组合选择符说明了两个选择器直接的关系。 目录： 后代选取器(以空格分隔) 子元素选择器(以大于号分隔） 相邻兄弟选择器（以加号分隔） 普通兄弟选择器（以破折号分隔） 后代选取器 后代选取器匹配所有值得元素的后代元素。 以下实例选取所有<p>元素插入到 <div> 元素中 实例 <!DOCTYPE html> <html> &...
HTML常用选择器
热门推荐
老张的博客
11-17 1万+
常用选择器 在HTML中常见选择器有： 元素选择器、id选择器、类选择器（class）、选择器分组（并集选择器）、通配选择器、复合选择器（交集选择器）。 元素选择器 作用：通过元素选择器可以选择页面中的所有指定元素。 语法：标签名{} &amp;nbsp;&amp;nbsp;例如： p{ color: darkmagenta; } id选择器 作用：通过元素的id值选中唯一的元素。 语法：#id属性...
CSS 组合选择符
冷月醉雪的博客
05-24 741
   CSS 组合选择符包括各种简单选择符的组合方式    在CSS3中包含了四种组合方式：    ·后代选择器(以空格分隔)    ·子元素选择器(以大于号分隔)    ·相邻兄弟选择器(以加号分隔)    ·普通兄弟选择器(以破折号分隔)   后代选择器    后代选择器用于选取某元素的后代元素    以下实例选取所有 &lt;p&gt; 元素插入到 &lt;div&gt; ...
css分组选择器
少油少盐不要辣
12-18 469
&amp;amp;lt;div class=&amp;quot;wrapper&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;box&amp;quot;&amp;amp;gt; &amp;amp;lt;a href=&amp;quot;&amp;quot;&amp;amp;gt;121212&amp;amp;lt;/a&
html中css选择器的分类,CSS选择器分类
weixin_42423852的博客
06-04 233
CSS选择器分类标签(空格分隔)： CSS 选择器标签选择器标签选择器：html代码中的标签。例如：html、form、span为p标签设置12px字号，行间距设置1.6em的样式:p{font-size:12px;line-height:1.6em;}类选择器类选择器：在css样式编码中是最常用到的；语法.类选器名称{css样式代码;}注意：1、英文圆点开头；2、其中类选器名称可以任意起名(但不...
css组合选择器_CSS选择器：组合器
culi3118的博客
08-20 686
css组合选择器The following is an extract from our book, CSS Master, written by Tiffany B. Brown. Copies are sold in stores worldwide, or you can buy it in ebook form here. 以下是Tiffany B. Brown所著《 CSS Maste...
html 分组 列表 可选择,选择分组.html · dengzhao/prd_zhangyao - Gitee.com
weixin_34357232的博客
06-03 181
选择分组$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath...
分组选择符
CTI技术与呼叫中心设计
10-31 305
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色： h1,span{color:red;} 它相当于下面两行代码： h1{color:red;} span{color:red;}
HTML+CSS基础笔记：从布局到超链接
本资源是一份由传智播客教师精心整理的关于HTML和CSS的7天学习笔记，涵盖了网页开发的基础知识。HTML和CSS是前端开发的两大核心技术，它们共同构建了网页的结构和样式。 首先，HTML（超文本标记语言）是用于创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值