CSS選擇器
CSS選擇器的目的是用來指定HTML中的tag元素、tag中的id、class設定進行CSS的格式設定,一個HTML元素標籤的一般性格式為:
<body>...</body>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<div id="myID" class="class1 class2 class3"></div>
我們可以針對body、h1~h6元素進行格式,
body{ color:red; }
h1 { color:red; }
…
h6 { color:red; }
以上這是標籤選擇器
我們想對一個名為myID的div元素進行格式設定:
#myID { color:red; }
這樣的選擇器叫 ID選擇器
我們想對某一個有指定class1的div進行設定 (通常來說,會有多個div指定class1,所以這叫類別,屬class1類的話,我們就進行某種CSS的格式設定。)
.class1 { color:red; }
這樣的選擇器叫 類別選擇器
上以三個是基本的CSS選擇器。
一個HTML文件裏通常會出現多個h1~h6,只要針對其中一個h1~h6進行格式設定,就會對全部的h1~h6產生作用,也因此,有時,我們只想針對某一個元素下的h1~h6進行設定,我們就會用範圍、子、子孫、兄弟等的方式指定一個特定的元素進行CSS格式設定。
一個HTML文件裏通常會出現多個h1~h6,只要針對其中一個h1~h6進行格式設定,就會對全部的h1~h6產生作用,也因此,有時,我們只想針對某一個元素下的h1~h6進行設定,我們就會用範圍、子、子孫、兄弟等的方式指定一個特定的元素進行CSS格式設定。
Universal selector通用選取器),使用字元* 設置整個網頁文件的所有元素CSS設定。 * {color:red;}
descendant selectors(子元素/後繼者選取器)
#myID a { color:green;} 指定myID內的a元素適用Child Selectors
div > p > span > em { color: red; /* sets color to red */ }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Advanced Example of CSS child selectors</title> <link rel='stylesheet' href='Advanced-Example-of-CSS-child-selector.css' type='text/css'> </head> <body> <div> <p><span>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit.</span> <span>Donec a <em>urna</em> elit.</span></p> </div> </body> </html>