当前位置: 主页>网站教程>CSS教程> CSS3属性选中器的几种用途（代码实例）

分享文章到：

CSS3属性选中器的几种用途（代码实例）

发布时间：09/01 来源：未知浏览：关键词：

本文目标：

1、把握CSS3中属性选中器几种用途

问题：

1、要求使用div+css实现以下结果，但是要求css文件中全部使用属性选中器来设定元素样式

实现效果.png

附加说明：

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">&nbsp;</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">&nbsp;</div>
    </div>
</body>
</html>

运转结果为：