溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、元素之間的關系
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Css之選擇器</title>
<style type="text/css">
/**
* 為div中的審判元素設置背景為綠色
* 后代選擇器
* 作用：選中指定元素的指定后代元素
* 語法：祖先元素 后代元素{}
*/
div span{
background-color: green;
}
</style>
</head>
<body>
<!--
元素之間的關系
時間：2016-12-04
描述：父元素：直接包含子元素的元素；
子元素：直接被父元素包含的元素；
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<span>我是div標簽中的span</span>
<p>
<span>
我是P標簽中的span
</span>
</p>
</div>
<span>我是body標簽中的審判</span>
</body>
</html>
二、后代選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Css之選擇器</title>
<style type="text/css">
/**
* 為div中的審判元素設置背景為綠色
* 后代選擇器
* 作用：選中指定元素的指定后代元素
* 語法：祖先元素 后代元素{}
*/
div span{
background-color: green;
}
</style>
</head>
<body>
<!--
元素之間的關系
時間：2016-12-04
描述：父元素：直接包含子元素的元素；
子元素：直接被父元素包含的元素；
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<span>我是div標簽中的span</span>
<p>
<span>
我是P標簽中的span
</span>
</p>
</div>
<span>我是body標簽中的審判</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Css之選擇器</title>
<style type="text/css">
/**
* 為div中的審判元素設置背景為綠色
* 后代選擇器
* 作用：選中指定元素的指定后代元素
* 語法：祖先元素 后代元素{}
*/
div span{
background-color: green;
}
/**
* 選中id為d1的div中的p元素中的span元素
*/
#d1 p span{
background: deepskyblue;
}
</style>
</head>
<body>
<!--
元素之間的關系
時間：2016-12-04
描述：父元素：直接包含子元素的元素；
子元素：直接被父元素包含的元素；
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<span>我是div標簽中的span</span>
<p>
<span>
我是P標簽中的span
</span>
</p>
</div>
<span>我是body標簽中的審判</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Css之選擇器</title>
<style type="text/css">
/**
* 為div中的審判元素設置背景為綠色
* 后代選擇器
* 作用：選中指定元素的指定后代元素
* 語法：祖先元素 后代元素{}
*/
div span{
background-color: green;
}
/**
* 選中id為d1的div中的p元素中的span元素
*/
#d1 p span{
background: deepskyblue;
}
/**
* 選中div的子元素span元素設置一個背景顏色
* 子元素選擇器
* 作用：在給定的父元素下匹配所有的子元素
* 語法：父元素>子元素
*/
div>span{
font-size: 25px;
}
</style>
</head>
<body>
<!--
元素之間的關系
時間：2016-12-04
描述：父元素：直接包含子元素的元素；
子元素：直接被父元素包含的元素；
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<span>我是div標簽中的span</span>
<p>
<span>
我是P標簽中的span
</span>
</p>
</div>
<span>我是body標簽中的審判</span>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
