溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Css選擇器之其他選擇器

發(fā)布時間：2020-04-04 18:08:47 來源：網(wǎng)絡(luò) 閱讀：332 作者：Java大S 欄目：開發(fā)技術(shù)

一、元素之間的關(guān)系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Css之選擇器</title>
		<style type="text/css">
			/**
			 * 為div中的審判元素設(shè)置背景為綠色
			 * 后代選擇器
			 * 作用：選中指定元素的指定后代元素
			 * 語法：祖先元素 后代元素{}
			 */
			div span{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<!--
			元素之間的關(guān)系
        	時間：2016-12-04
        	描述：父元素：直接包含子元素的元素；
        		子元素：直接被父元素包含的元素；
        		祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
        		后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
        		兄弟元素：擁有相同父元素的元素叫做兄弟元素
        -->
		<div id="d1">
			<span>我是div標(biāo)簽中的span</span>
			<p>
				<span>
					我是P標(biāo)簽中的span
				</span>
			</p>
			
		</div>
		<span>我是body標(biāo)簽中的審判</span>
	</body>
</html>

Css選擇器之其他選擇器


二、后代選擇器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Css之選擇器</title>
		<style type="text/css">
			/**
			 * 為div中的審判元素設(shè)置背景為綠色
			 * 后代選擇器
			 * 作用：選中指定元素的指定后代元素
			 * 語法：祖先元素 后代元素{}
			 */
			div span{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<!--
			元素之間的關(guān)系
        	時間：2016-12-04
        	描述：父元素：直接包含子元素的元素；
        		子元素：直接被父元素包含的元素；
        		祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
        		后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
        		兄弟元素：擁有相同父元素的元素叫做兄弟元素
        -->
		<div id="d1">
			<span>我是div標(biāo)簽中的span</span>
			<p>
				<span>
					我是P標(biāo)簽中的span
				</span>
			</p>
			
		</div>
		<span>我是body標(biāo)簽中的審判</span>
	</body>
</html>

Css選擇器之其他選擇器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Css之選擇器</title>
		<style type="text/css">
			/**
			 * 為div中的審判元素設(shè)置背景為綠色
			 * 后代選擇器
			 * 作用：選中指定元素的指定后代元素
			 * 語法：祖先元素 后代元素{}
			 */
			div span{
				background-color: green;
			}
			/**
			 * 選中id為d1的div中的p元素中的span元素
			 */
			#d1 p span{
				background: deepskyblue;
			}
		</style>
	</head>
	<body>
		<!--
			元素之間的關(guān)系
        	時間：2016-12-04
        	描述：父元素：直接包含子元素的元素；
        		子元素：直接被父元素包含的元素；
        		祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
        		后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
        		兄弟元素：擁有相同父元素的元素叫做兄弟元素
        -->
		<div id="d1">
			<span>我是div標(biāo)簽中的span</span>
			<p>
				<span>
					我是P標(biāo)簽中的span
				</span>
			</p>
			
		</div>
		<span>我是body標(biāo)簽中的審判</span>
	</body>
</html>

Css選擇器之其他選擇器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Css之選擇器</title>
		<style type="text/css">
			/**
			 * 為div中的審判元素設(shè)置背景為綠色
			 * 后代選擇器
			 * 作用：選中指定元素的指定后代元素
			 * 語法：祖先元素 后代元素{}
			 */
			div span{
				background-color: green;
			}
			/**
			 * 選中id為d1的div中的p元素中的span元素
			 */
			#d1 p span{
				background: deepskyblue;
			}
			/**
			 * 選中div的子元素span元素設(shè)置一個背景顏色
			 * 子元素選擇器
			 * 作用：在給定的父元素下匹配所有的子元素
			 * 語法：父元素>子元素
			 */
			div>span{
				font-size: 25px;
			}
			
		</style>
	</head>
	<body>
		<!--
			元素之間的關(guān)系
        	時間：2016-12-04
        	描述：父元素：直接包含子元素的元素；
        		子元素：直接被父元素包含的元素；
        		祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
        		后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
        		兄弟元素：擁有相同父元素的元素叫做兄弟元素
        -->
		<div id="d1">
			<span>我是div標(biāo)簽中的span</span>
			<p>
				<span>
					我是P標(biāo)簽中的span
				</span>
			</p>
		</div>
		<span>我是body標(biāo)簽中的審判</span>
	</body>
</html>

Css選擇器之其他選擇器





向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手