您当前的位置:网站首页>CSS>CSS3属性选择器的几种用法(代码实例) 找CSS教程就上ki4.cc (>^ω^<),CSS3

CSS3属性选择器的几种用法(代码实例) 找CSS教程就上ki4.cc (>^ω^<),CSS3

2020年06月11日 投稿作者: 围观人数:26

css中实现背景透明的三种方式 找CSS教程就上ki4.cc (>^ω^<)

css中实现背景透明有三种方式,分别是:1、css3的opacity:x;2、css3的rgba(red, green, blue, alpha);3、IE专属滤镜filter:Alpha(opacity=x)。

本文目标:

1、掌握CSS3中属性选择器几种用法

问题:

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

附加说明:

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、军事标题颜色是蓝色的

结构性伪类选择器—target实现可搜索菜单案例(代码实例 ) 找CSS教程就上ki4.cc (>^ω^<)

实现以下菜单效果,当点击公众号弹出4个子菜单,当点击小程序,弹出另外2个子菜单,之前展示的子菜单需要自动收缩起来,且使用纯DIV+CSS,必须使用结构性伪类选择器—target ...

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>

运行结果为:

到此为止,实现了所需的结果

总结:

1、讲解了属性选择器的几种用法,比如

A=B表示A属性值等于B字符串

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

A$=B表示A属性值以B字符串结尾

A^=B表示A属性值以B字符串开头

以上就是CSS3属性选择器的几种用法(代码实例)的详细内容,更多请关注ki4导航其它相关文章!

结构性伪类选择器—nth-child实现彩色表格案例(代码实例 ) 找CSS教程就上ki4.cc (>^ω^<)

1、每个单元格宽145,带1个像素边框,左边padding为5,上下padding为15;2、标题字体为20px,加粗现在来具体操作:1、准备素材:无,不需要准备额外的素材图片2、创建好inde...

标签

版权说明
免责声明:本文文章内容由ki4导航网发布,但不代表本站的观点和立场,具体内容可自行甄别.