div+css網頁佈局設計新開端（2）-css教學-PHP中文網

首頁

web前端

css教學

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

黄舟

Dec 29, 2016 pm 02:13 PM

下面介紹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選擇器前面加#

然後是類選擇器
rr

reee
也是一看就明白類選擇器前面加.

下面說說它們的區別
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>

和

<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>

是一樣的

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

<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>

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

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

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

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

<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>

class="a b" 注意要空格

這是一個div

這樣是無效的

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

<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+css網頁佈局設計新開端（2）的內容，更多相關內容請關注PHP中文網（www.php.cn）！

🎜🎜

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

揭開屏幕讀取器的神秘面紗：可訪問的表格和最佳實踐Mar 08, 2025 am 09:45 AM

這是我們在形式可訪問性上進行的小型系列中的第三篇文章。如果您錯過了第二篇文章，請查看“以：focus-visible的管理用戶焦點”。在

使用智能表單框架創建JavaScript聯繫表格Mar 07, 2025 am 11:33 AM

本教程演示了使用智能表單框架創建外觀專業的JavaScript表單（注意：不再可用）。儘管框架本身不可用，但原理和技術仍然與其他形式的建築商相關。

將框陰影添加到WordPress塊和元素Mar 09, 2025 pm 12:53 PM

CSS盒子陰影和輪廓屬性獲得了主題。讓我們查看一些在真實主題中起作用的示例，以及我們必須將這些樣式應用於WordPress塊和元素的選項。

創建一個具有可滿足屬性的內聯文本編輯器Mar 02, 2025 am 09:03 AM

構建內聯文本編輯器並不是微不足道的。該過程首先要使目標元素可編輯，並在此過程中處理潛在的語法異常。創建編輯器來構建此編輯器，您需要動態修改內容

使用GraphQL緩存Mar 19, 2025 am 09:36 AM

如果您最近開始使用GraphQL或審查了其優點和缺點，那麼您毫無疑問聽到了諸如“ GraphQl不支持緩存”或

使您的第一個自定義苗條過渡Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一種使組件輸入或離開文檔（包括自定義Svelte Transitions）時動畫組件的方法。

比較5個最佳的PHP形式構建器（和3個免費腳本）Mar 04, 2025 am 10:22 AM

本文探討了Envato Market上可用的PHP表單構建器腳本，比較了其功能，靈活性和設計。在研究特定選項之前，讓我們了解PHP形式構建器是什麼以及為什麼要使用一個。 PHP形式

在node.js中使用multer上傳並上傳expressMar 02, 2025 am 09:15 AM

該教程通過使用node.js，express和multer構建文件上傳系統來指導您。我們將介紹單個和多個文件上傳，甚至演示在MongoDB數據庫中存儲圖像以進行以後的檢索。首先，設置您的projec

See all articles

熱AI工具

熱工具

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中