首頁  >  文章  >  web前端  >  CSS3屬性選擇器的幾個用法(程式碼實例)

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

易达
易达原創
2020-06-09 18:05:072633瀏覽

本文目標:

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屬性選擇器的幾個用法(程式碼實例)

到此為止,實作了所需的結果

總結:

1、講解了屬性選擇器的幾種用法,例如

A=B表示A屬性值等於B字串

A*=B表示A屬性值包含B字串

##A$=B表示A屬性值以B字串結尾

A^=B表示A屬性值以B字串開頭

以上是CSS3屬性選擇器的幾個用法(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn