CSS3屬性選擇器的幾個用法（程式碼實例）-css教學-PHP中文網

本文目標：

1、掌握CSS3中屬性選擇器幾種用法

問題：

1、要求使用div css實現以下效果，但要求css文件中全部使用屬性選擇器來設定元素樣式

CSS3屬性選擇器的幾個用法（程式碼實例）

附加說明：

1、整個div寬為850，要求在頁面中居中顯示

2、標題大小為28，加粗顯示

3、其他字體14px大小

4、點擊明星八卦，跳到tobagua.html，點擊軍事新聞跳到toaffairs.html

現在來具體操作

1、因為案例不需要一些額外的素材，所以準備素材這一步就可以省略了

2、創造好index.html，寫好架構，架構如何分析呢

#想法分析：

1、目標分成左右2個部分，每個部分都是顯示新聞列表，只是每個新聞的類別不一樣，而且一些樣式也不同

2、含有林心如的新聞顏色要單獨設置

3、含有f15的新聞顏色也要單獨設定

4、兩個部分的標題也要單獨設置，所以要給他們單獨設置一些屬性，這才可以透過屬性選擇器來匹配到

5 、因為每個部分都是列表，所以我們可以使用ul，但是兩個ul都是平齊的，所以需要用到float，既然是float了，那麼為了確保外層的容器依然能包裹住浮動的元素，所以最後需要加上clear元素來清除浮動

根據分析，我們得到以下程式碼

    属性选择器 
    明星八卦  ->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华，太美了 
 ->倪萍还是胖点好，瘦下来后太显老了，一点精神没有穿衣也不好看！ 
 ->汪小菲晒儿女沙滩上顽皮玩耍，儿子长高不少，女儿一身泥被指酷似奶奶张兰 
 ->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! 
 
 
  军事新闻  ->F15E成为首型接收B61-12核弹的战斗机 
 ->越南的骑兵警队，马略矮了点啊 
 ->美军运输机降落时冲出跑道后撞墙起火 4人受伤 
 ->不到一个月又出事：美军F-35降落时起落架折断

登入後複製

3、寫樣式，建立css資料夾，裡面新建index.css ，裡面的樣式怎麼寫了，以下是分析思路

思路分析：

#container容器的所有子元素

1、因為要求每個樣式必須使用屬性選擇器來匹配設置，所以我們的思路是首先要獲取到屬性container=true的元素，然後給它設置一些共同的樣式，比如最常見的padding,margin,因為不這樣設定的話，有些元素的預設padding你未必清楚，為了讓你專心寫邏輯，我們統一他們的padding,margin都為0

所以index.css中加入程式碼如下：

div[container =true] *{ padding:0; margin:0; }

登入後複製

container容器

1、根據要求得知，最外層容器的寬為850，要居中，上下左右都有padding，有灰色邊框，預設字體大小為14px，哪個是container容器呢，就是container屬性=true的元素

所以index.css中加入程式碼如下：

div[container =true] { width: 850px; margin: 0 auto; font-size: 14px; border: 1px solid lightgray; padding: 10px; }

登入後複製

2個標題公共樣式設定

#1、因為標題都要求居中，字體大小為28px,加粗顯示，哪些是標題呢，就是屬性title=true的所有元素

所以index.css中加入程式碼如下：

span[title=true] { text-align: center; font-size: 28px; font-weight: bold; }

登入後複製

2個標題連接的單獨設定

1、八卦標題顏色是帶有紅色的

2、軍事標題顏色是藍色的

3、屬性href含有bagua字串的就是左邊的標題連接，href屬性以toaffairs開頭的就是右邊標題連接

*= 表示包含，^=表示開頭

#所以index.css中加入程式碼如下：

a[href *=bagua] { color: rgb(234, 84, 23); } a[href ^=toaffairs] { color: green; }

登入後複製

左右浮動div設定

#1、左邊div需要向左浮動，那哪個是左邊那個div呢，其實就是left屬性為true的div

2、右邊div需要向右浮動，那哪個是右邊那個div呢，其實就是right屬性為true的div

3、作用為清除浮動的div，其實就是class 以clear結尾的那個

註：$= 表示以什麼結束

所以index.css中加入程式碼如下：

div[left =true] { float: left; } div[right =true] { float: right; } div[class $= clear] { clear: both; float: none; width: 0; height: 0; }

登入後複製

# li設定

1、li不包含黑色圓點，所以list-style:none

2、屬性class包含news字串的元素即為li

3、根據效果得出上下左右有一定的間距

所以index.css中添加代碼如下：

li[class =news] { list-style: none; height: 42px; line-height: 42px; padding:3px 10px; }

登入後複製

#含有林心如的標題設定

1、此標題顏色為土黃色，字體加粗

2、class屬性以lxr結尾的為林心如的標題，所以用$=

[class $=lxr]{ color:peru; font-weight: bold; }

登入後複製

#含有f15的標題設定

1、此標題顏色為藍色，字體加粗

2、class屬性包含f15字串的標題為目標設定標題，所以用*=

[class*=f15]{ color:blue; font-weight: bold; }

登入後複製

到此為止，index.css的全部內容如下：

div[container =true] *{ padding:0; margin:0; } div[container =true] { width: 850px; margin: 0 auto; font-size: 14px; border: 1px solid lightgray; padding: 10px; } span[title=true] { text-align: center; font-size: 28px; font-weight: bold; } a[href *=bagua] { color: rgb(234, 84, 23); } a[href ^=toaffairs] { color: green; } div[left =true] { float: left; } div[right =true] { float: right; } div[class $= clear] { clear: both; float: none; width: 0; height: 0; } li[class *=news] { list-style: none; height: 42px; line-height: 42px; padding:3px 10px; } [class $=lxr]{ color:peru; font-weight: bold; } [class*=f15]{ color:blue; font-weight: bold; }

登入後複製

然後將index.css引入index.html

    属性选择器  
    明星八卦  ->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华，太美了 
 ->倪萍还是胖点好，瘦下来后太显老了，一点精神没有穿衣也不好看！ 
 ->汪小菲晒儿女沙滩上顽皮玩耍，儿子长高不少，女儿一身泥被指酷似奶奶张兰 
 ->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! 
 
 
  军事新闻  ->F15E成为首型接收B61-12核弹的战斗机 
 ->越南的骑兵警队，马略矮了点啊 
 ->美军运输机降落时冲出跑道后撞墙起火 4人受伤 
 ->不到一个月又出事：美军F-35降落时起落架折断