web.jpeg
繼承性
- 子標(biāo)簽可以繼承父類的標(biāo)簽的樣式
- 并不是所有的屬性都可以繼承的
- color,text-開頭，line-開頭，font-開頭的 可以繼承，關(guān)于文字樣式的可以繼承，所有關(guān)于盒子的，定位的，布局的屬性不可以繼承
- a標(biāo)簽是不可以繼承父類的color和font的
- div設(shè)置文字樣式，它的子類就會(huì)繼承這些樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之選擇器</title>
<!-- 樣式-->
<style type="text/css">
div{
color: red;
text-decoration: underline;
font-size: 40px;
}
</style>
</head>
<body>
<div>
<a>這是一個(gè)標(biāo)題</a>
<p>是一個(gè)段落</p>
<ul>
<li>這是個(gè)列表</li>
</ul>
</div>
</body>
</html>
繼承性.png
層疊性 和 權(quán)重
- 層疊性是css解決沖突的能力
- 層疊性能力大小要根據(jù)權(quán)重的高低來決定
-
權(quán)重的大小是要數(shù) Id選擇器，class選擇器，標(biāo)簽選擇器的數(shù)量來決定的
權(quán)重.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之選擇器</title>
<!-- 樣式-->
<style type="text/css">
#box1 .hezi2 p {
color: red;
}
div div #box3 p {
color: green;
}
div.hezi1 div.hezi2 div.hezi3 {
color: blue;
}
</style>
</head>
<body>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p> 我是什么顏色</p>
</div>
</div>
</div>
</body>
</html>
- 如果權(quán)重一樣，誰在后聽誰的
權(quán)重一樣，聽后面的.png
-
在設(shè)置 文本的樣式的時(shí)候，必須是選中的，如果沒有選中的話，通過繼承類的，那權(quán)重是0。
是否選中目標(biāo)標(biāo)簽.png 在層疊性的繼承中，如果都沒有選中目標(biāo)標(biāo)簽，那個(gè)描述的距離目標(biāo)標(biāo)簽進(jìn)，就聽那個(gè)的。
!important注意點(diǎn)
! important的提升的是一個(gè)屬性，并不是選擇器
! important無法提升繼承的權(quán)重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>important提升權(quán)重</title>
<style type="text/css">
p{
color: red !important;
font-size: 60px;
}
.pp{
color: purple;
font-size: 70px;
}
#op{
color: orange;
font-size: 80px;
}
</style>
</head>
<body>
<div>
<p class="pp" id="op" >
這是一個(gè)段落
</p>
</div>
</body>
</html>
提升的是咦個(gè)屬性.png
