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

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

黄舟

發布： 2016-12-29 14:17:13

原創

1206 人瀏覽過

下面介紹組合選擇器
組合選擇器就是相同的屬性都放在一起

例如

<h1>标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

登入後複製

我要讓這5種標題的文字都變成紅色，顯然一個個定義就太麻煩了
我們可以這樣



 

<h1>标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

登入後複製

當然也可以id選擇器，類別選擇器，標籤選擇器一起組合

,a,#b,div{
color:red
}

登入後複製

注意都要用逗號隔開
如果沒用逗號隔開，就是我們下面要說的父子選擇器了

<div id="a">
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<div>

登入後複製

假如要讓div裡的hi標籤都成紅色
有很多辦法，一種用標籤選擇器，但是會讓頁上所有的H1標籤都成紅色，不好
也可以用類標籤，但每個h1標籤裡都要class一下麻煩

我們可以這樣



 

<div id="a">
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<div>

登入後複製

這樣就ok了

如果是這樣

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>

登入後複製

這樣就ok



 

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>

登入後複製



 

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>

登入後複製

這樣就ok

reee

下面的任何標籤或類或id選擇器，也就是孫子或重孫子
所以這樣也是可以的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]{
color:red;
}
</style> <head>
<body>
<div id="a">
<a title="a"><h1>标题</h1></a>
<a title="b"><h1>标题</h1></a>
<div>
</body>
</html>

登入後複製

但建議最好不要這樣。因為層次不清楚的話很容易搞暈

另外一種屬性選擇器，不是很常用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

登入後複製

必訓得加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 


标题
标题

登入後複製

文檔說明才有用

input[type="text"]
{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } 
input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }

登入後複製

文檔說明才有用

屬性選擇器在為不帶有class 或id 的表單設定樣式時特別有用：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;} </style> <head>
<body>
<h1>标题</h1>
<p>我离上面标题50px</p>
<p>不变</p>
<p>不变</p>
</body>
</html>

登入後複製

但其實也不是常用，不做必訓掌握內容

下面是介紹相鄰選擇器
這可能很難理解

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p a {color:red;} </style> <head>
<body>
<p>你<a>好</a>吗</p>
<p>你<span><a>好</a></span>吗</p>
</body>
</html>

登入後複製

這其實是針對第一個p的樣式，margin-top:50px表示外邊距50px，以後學到

還有一種子元素選擇器，也比較難理解

先看下面

先看下面

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p>a {color:red;} </style> <head>
<body>
<p>你<a>好</a>吗</p>
<p>你<span><a>好</a></span>吗</p>
</body>
</html>

登入後複製

這種很熟悉啦，父子選擇器，我說過父親可以控制任意下面的子元素，所以兩個好都變紅色
如果我只希望a是p的子元素，另外一個a是span的子元素,就該這樣

rrreee
這兩種選擇器都得加（當然不是只有這個），否則無效

這兩種選擇器很靈活，作為高手進階吧，初學還是把其他選擇器基礎打緊

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