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

首頁

web前端

css教學

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

易达

Jun 09, 2020 pm 06:05 PM

css3

本文目標：

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元素來清除浮動

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
</head>

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

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
</head>

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

#運行結果為：

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