css語法中的選擇器與屬性詳解：嵌套聲明、集體聲明、全局聲明、混合選擇器

嵌套聲明

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>嵌套聲明</title>
<!--        這里p span 的含義是p標簽下面的span標簽 所以有嵌套關系--><style>p span {font-weight: bold;color: burlywood;}</style>
</head><body><p><span>天使投資</span>是投資的一種方式</p>
</body>
</html>

執行結果
在這里插入圖片描述

集體聲明

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>集體聲明</title><!--    語法上是多個標簽通過逗號分割--><style>p,h1 {font-weight: bold;color: burlywood;}</style>
</head><body><h1></h1><p>歡迎訪問論壇</p>
</body>
</html>

全局聲明

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>全局聲明</title><!--    含義是對全局進行統一申明--><style>* {font-weight: bold;color: burlywood;}</style>
</head><body><h1>歡迎訪問論壇</h1><h2>歡迎訪問論壇</h2><p>歡迎訪問論壇</p>
</body>
</html>

執行結果
在這里插入圖片描述

混合選擇器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>混合選擇器</title>
<!--    類名屬性是用.控制--><style>.font {font-size: 18px;}.red {color: red;}.blue {color: blue;}.center {text-align: center;}.right {text-align: right;}.bgcolor {background-color: burlywood;}</style>
</head>
<body>
<!--    混合選擇器主要使用類名來實現--><p class = "font red right">這里的文字，18px紅色，右對齊</p><div class="font blue center">這里的文字，18px藍色，居中對齊</div><div class="font blue center bgcolor">這里的文字，18px藍色，居中對齊，有背景色</div>
</body>
</html>

執行結果
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/84918.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/84918.shtml
英文地址，請注明出處：http://en.pswp.cn/web/84918.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！