div+css網頁布局設計新開端（2）

最後更新：2016-12-29 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

下面介紹css裡的選取器
啥為選取器？看下面就明白

<html><head><style type="text/css">div{border:solid 1px;width:100px;height:100px;background:red}</style> <head><body><div>這是一個div</div></body></html>

其中大括弧前的div就是html標籤選取器，意思就是說html裡所有div標籤都採用此樣式

<html><head><style type="text/css">div{border:solid 1px;width:100px;height:100px;background:red}</style> <head><body><div>這是一個div</div><div></div><div></div><div></div></body></html>

這裡多加幾個div你會發現都是同一樣式
這種標籤選取器只能是html標籤才會生效

下面介紹ID選取器

<html><head><style type="text/css">#a{border:solid 1px;width:100px;height:100px;background:red}</style> </head><body><div id="a">這是一個div</div></body></html>

這玩意一看就明白，用id選取器前面加#

然後是類別選取器

<html><head><style type="text/css">.a{border:solid 1px;width:100px;height:100px;background:red}</style> <head><body><div class="a">這是一個div</div></body></html>

也是一看就明白類別選取器前面加.

下面說說它們的區別
id顧名思義就是唯一標識，一個標籤只能用一次，他的優先順序要比類別選取器要高
而類別選取器在一個標籤裡可以用多個

<html><head><style type="text/css">#a{border:solid 1px;width:100px;height:100px;background:red}</style> <head><body><div id="a">這是一個div</div><div id="a">這是一個div</div></body></html>

和

<html><head><style type="text/css">.a{border:solid 1px;width:100px;height:100px;background:red}</style> <head><body><div class="a">這是一個div</div><div class="a">這是一個div</div></body></html>

是一樣的

另外說一句，css樣式塊，也就是這個

.a{border:solid 1px;width:100px;height:100px;background:red}

最後一個可以省略分號，但最好加上

<html><head><style type="text/css">#a{background:red}.b{border:solid 1px;width:100px;height:100px;background:green;}</style> <head><body><div id="a" class="b">這是一個div</div></body></html>

由於id選取器優先順序高，它會採用id選取器的背景顏色
優先順序比較
id選取器》類別選取器》標籤選取器

但是類別選取器可以在一個標籤使用多個，這是id選取器做不到的

<html><head><style type="text/css">.a{width:100px;height:100px;}.b{border:solid 1px;background:red;}</style> <head><body><div class="a b" >這是一個div</div></body></html>

class="a b" 注意要空格
<div class="a" class="b" >這是一個div</div> 這樣是無效的

如果兩個類別選取器內容衝突怎麼辦？

<html><head><style type="text/css">.a{width:100px;height:100px;border:solid 1px;background:red;}.b{width:100px;height:100px;border:solid 1px;background:green;}</style> <head><body><div class="a b" >這是一個div</div></body></html>

注意就背景顏色不一樣
它會採用樣式表裡最靠後的，也就是誰在誰後面就採用那個，答案是綠色
跟這個class="a b" 前後關係無關

以上就是div+css網頁布局設計新開端（2）的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More