本篇文章展示了CSS3中屬性選擇器的使用方法，代碼簡明扼要容易理解，如果在日常工作遇到這個(gè)疑問。希望大家通過這篇文章，找到解決疑問的辦法。

創(chuàng)新互聯(lián)公司專注于巧家網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供巧家營銷型網(wǎng)站建設(shè)，巧家網(wǎng)站制作、巧家網(wǎng)頁設(shè)計(jì)、巧家網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造巧家網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供巧家網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。問題：

1、要求使用div+css實(shí)現(xiàn)以下效果，但是要求css文件中全部使用屬性選擇器來設(shè)置元素樣式

附加說明：

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

2、標(biāo)題大小為28，加粗顯示

3、其他字體14px大小

4、點(diǎn)擊明星八卦，跳轉(zhuǎn)到tobagua.html，點(diǎn)擊軍事新聞跳轉(zhuǎn)到toaffairs.html

現(xiàn)在來具體操作

1、因?yàn)樵摪咐恍枰恍╊~外的素材，所以準(zhǔn)備素材這一步就可以省略了

2、創(chuàng)建好index.html，寫好架構(gòu)，架構(gòu)如何分析呢

思路分析：

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

2、含有林心如的新聞?lì)伾獑为?dú)設(shè)置

3、含有f15的新聞?lì)伾惨獑为?dú)設(shè)置

4、兩個(gè)部分的標(biāo)題也要單獨(dú)設(shè)置，所以要給他們單獨(dú)設(shè)置一些屬性，這才可以通過屬性選擇器來匹配到

5、因?yàn)槊總€(gè)部分都是列表，所以我們可以使用ul，但是兩個(gè)ul都是平齊的，所以需要用到float，既然是float了，那么為了確保外層的容器依然能包裹住浮動(dòng)的元素，所以最后需要加上clear元素來清除浮動(dòng)

根據(jù)分析，我們得出以下代碼

    
    



    

        

            明星八卦
            

                
->林心如女兒小海豚正面照被公開顏值撞臉年輕時(shí)的霍建華，太美了 
                
->倪萍還是胖點(diǎn)好，瘦下來后太顯老了，一點(diǎn)精神沒有穿衣也不好看！ 
                
->汪小菲曬兒女沙灘上頑皮玩耍，兒子長高不少，女兒一身泥被指酷似奶奶張?zhí)m 
                
->伊能靜給婆婆安排了個(gè)小次臥, 走進(jìn)秦媽媽的表情變化讓人心疼! 
            
        
        

            軍事新聞
            

                
->F15E成為首型接收B61-12核彈的戰(zhàn)斗機(jī) 
                
->越南的騎兵警隊(duì)，馬略矮了點(diǎn)啊 
                
->美軍運(yùn)輸機(jī)降落時(shí)沖出跑道后撞墻起火 4人受傷 
                
->不到一個(gè)月又出事：美軍F-35降落時(shí)起落架折斷 
            
        
        
 
    

3、寫樣式 ，創(chuàng)建css文件夾，里面新建index.css，里面的樣式怎么寫了，以下是分析思路

思路分析：

container容器的所有子元素

1、因?yàn)橐竺總€(gè)樣式必須使用屬性選擇器來匹配設(shè)置，所以我們的思路是首先要獲取到屬性container=true的元素，然后給它設(shè)置一些共同的樣式，比如最常見的padding,margin,因?yàn)椴贿@樣設(shè)置的話，有些元素的默認(rèn)padding你未必清楚，為了讓你專心寫邏輯，我們統(tǒng)一他們的padding,margin都為0

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

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

container容器

1、根據(jù)要求得知，最外層容器的寬為850，要居中，上下左右都有padding，帶灰色邊框，默認(rèn)字體大小為14px，哪個(gè)是container容器呢，就是container屬性=true的元素

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

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

2個(gè)標(biāo)題公共樣式設(shè)置

1、因?yàn)闃?biāo)題都要求居中，字體大小為28px,加粗顯示，哪些是標(biāo)題呢，就是屬性title=true的所有元素

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

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

2個(gè)標(biāo)題連接的單獨(dú)設(shè)置

1、八卦標(biāo)題顏色是帶紅色的

2、軍事標(biāo)題顏色是藍(lán)色的

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

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

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

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

a[href ^=toaffairs] {
   color: green;
}

左右浮動(dòng)div設(shè)置

1、左邊div需要向左浮動(dòng)，那哪個(gè)是左邊那個(gè)div呢，其實(shí)就是left屬性為true的div

2、右邊div需要向右浮動(dòng)，那哪個(gè)是右邊那個(gè)div呢，其實(shí)就是right屬性為true的div

3、作用為清除浮動(dòng)的div，其實(shí)就是 class 以clear結(jié)尾的那個(gè)

注：$= 表示以什么結(jié)束

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

div[left =true] {
   float: left;
}

div[right =true] {
   float: right;
}

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

li設(shè)置

1、li不包含黑色圓點(diǎn)，所以list-style:none

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

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

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

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

含有林心如的標(biāo)題設(shè)置

1、此標(biāo)題顏色為土黃色，字體加粗

2、class屬性以lxr結(jié)尾的為林心如的標(biāo)題，所以用$=

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

含有f15的標(biāo)題設(shè)置

1、此標(biāo)題顏色為藍(lán)色，字體加粗

2、class屬性包含f15字符串的標(biāo)題為目標(biāo)設(shè)置標(biāo)題，所以用 *=

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

到此為止，index.css的全部內(nèi)容如下：

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

    
    
     



    

        

            明星八卦
            

                
->林心如女兒小海豚正面照被公開顏值撞臉年輕時(shí)的霍建華，太美了 
                
->倪萍還是胖點(diǎn)好，瘦下來后太顯老了，一點(diǎn)精神沒有穿衣也不好看！ 
                
->汪小菲曬兒女沙灘上頑皮玩耍，兒子長高不少，女兒一身泥被指酷似奶奶張?zhí)m 
                
->伊能靜給婆婆安排了個(gè)小次臥, 走進(jìn)秦媽媽的表情變化讓人心疼! 
            
        
        

            軍事新聞
            

                
->F15E成為首型接收B61-12核彈的戰(zhàn)斗機(jī) 
                
->越南的騎兵警隊(duì)，馬略矮了點(diǎn)啊 
                
->美軍運(yùn)輸機(jī)降落時(shí)沖出跑道后撞墻起火 4人受傷 
                
->不到一個(gè)月又出事：美軍F-35降落時(shí)起落架折斷 
            
        
        
 
    

運(yùn)行結(jié)果為：

看完上述內(nèi)容，你們掌握CSS3中屬性選擇器的使用方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章題目：CSS3中屬性選擇器的使用方法-創(chuàng)新互聯(lián)
標(biāo)題URL：http://weahome.cn/article/dchhoh.html