<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS權重練習1</title>
<style>
.nav {
color: red;
}
/* li權重繼承為 0,0,0,0 */
/* li權重 0,0,0,1 */
li {
color: blue;
}
</style>
</head>
<body>
<ul class="nav">
<li>人生四大悲</li>
<li>家裡沒寬帶</li>
<li>網速不夠快</li>
<li>手機沒流量</li>
<li>學樣沒wifi</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS權重練習(疊加)2</title>
<style>
/* .nav li權重 0,0,1,0 0,0,0,1 0,0,1,1*/
.nav li{
color: red;
}
/* 需求把第一個小li顔色改為 粉色加粗 */
/* .pink權得 0,0,1,0 */
/* .nav .pink權重 0,0,1,0 0,0,1,0 0,0,2,0 */
.nav .pink {
color: pink;
font-weight: 700;
}
</style>
</head>
<body>
<ul class="nav">
<li class="pink">人生四大悲</li>
<li>家裡沒寬帶</li>
<li>網速不夠快</li>
<li>手機沒流量</li>
<li>學樣沒wifi</li>
</ul>
</body>
</html>