CSS 基本選擇器LOGIN

CSS 基本選擇器

在 CSS 中,選擇器是一種模式,用於選擇需要新增樣式的元素。        
屬性選擇器可依據元素的屬性及屬性值來選擇元素。

三種基本的選擇器類型:標籤名稱選擇器、類別選擇器、ID選擇器

#注意:在標籤內寫入style=" "的方式,應該是CSS的一種引入方式,而不是選擇器,因為根本就沒有用到選擇器。 

1:標籤名稱選擇器 
#一個HTML文件中有許多標籤,例如p標籤,h1標籤等。若要讓文件中的所有p標籤都使用同一個CSS樣式,就應使用標籤選擇器。

html {color:black;}
h1 {color:blue;}
p2{color:silver;}

即直接使用HTML標籤作為選擇器。


2:類別選擇器 
使用標籤選擇器可以為整個HTML文件中的同一個標籤指定相同的CSS樣式。但在實際運用中,HTML文件中的同一個標籤會被重複使用。若要為相同的標籤賦予不同的CSS樣式就應使用類別選擇器。 
<div class="test">測試程式碼</div> 

.test {color:red;border:1px blue solid;} 

#在html文件裡,我們在要控制樣式的標籤的開標籤(非成對標籤如input直接放在標籤裡)裡加入class="xxx",在頁面對應的css文件裡,用.xxx就可以指向這個標籤,從而對這個標籤進行控制,我們稱這種透過定義類別(class)來找到標籤的方式為:類別選擇器。

這種定義class 的方式是前端開發最常用的選擇器,有幾個突出的特點:可以給不同的標籤設置同一個類,從而用一條CSS命令控制幾個標籤,減少大量程式碼,是頁面修改簡單,易維護,易改版;其次,後台工作人員機會不會用到有關class的相關設置,不需要跟後台人員之間進行交互;再者,可以透過js等動態改變標籤的Classname,從而改變整個標籤的樣式,讓前端動態效果實現起來更為容易。


3:ID選擇器 
ID選擇器和類別選擇器相似,不同的是,ID選擇器不能復用。在一個XHTML文件中,一個ID選擇器只能把其CSS樣式指定給​​一個標籤。
<div id="test">測試程式碼</div> 

test {color:red ;border:1px blue solid;} 

有ID 的HTML元素可以被JavaScript來操縱.再就是ID也是後台開發人員會常用的,所以前端開發人員應該盡量少的使用。 



#下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS中CLASS与ID实例</title> <style> .css5{ width:100px; height:100px; border:1px solid #000; float:left; } .css5_class{ background:#FFF;} /* 背景白色 */ #css5_id{ background:#FF0000; width:300px;} /* 背景红色 */ </style> </head> <body> <div class="css5 css5_class">我在浏览器下浏览,内容背景将是白色</div> <div class="css5" id="css5_id">我在浏览器下浏览,内容背景将是红色</div> </body> </html>
章節課件