CSS中的属性选择器

最新推荐文章于 2024-03-18 23:43:11 发布

一只小百里

最新推荐文章于 2024-03-18 23:43:11 发布

阅读量3k

点赞数 4

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_48637535/article/details/119548755

版权

CSS3 属性选择器灯箱广告 Eattr nav样式

关键词由CSDN通过智能技术生成

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS3中共有7种属性选择器，具体说明如下：

1.E[attr]：只使用了属性名，并没有确定任何属性值。

2.E[attr="value"]：指定了属性名，并指定了该属性的属性值。

3.E[attr~="value"]：指定了属性名，并指定了该属性的属性值，此属性值是一个词列表，并且以空格隔开，其中的词列表包含一个value值，而且“~”不可忽略。

4.E[attr^="value"]：指定了属性名，并指定了该属性的属性值，属性值是以value开头的。

5.E[attr$="value"]：指定了属性名，并指定了该属性的属性值，属性值是以value结束的。

6.E[attr*="value"]：指定了属性名，并指定了该属性的属性值，属性值中包含value。

7.E[attr|="value"]：指定了属性名，并且属性值是value或以"value"开头的值，如（zh-cn）

以下是一个简单的灯箱广告示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        /*灯箱外框样式*/
        .pic_box{
            border: solid 6px #bbb;
            position: relative;
            float: left;
        }
        .pic_box img{
            width: 500px;
            border: solid 1px #fff;
        }
        /*导航框样式*/
        .nav{
            background: rgb(191, 202, 206); border: 1px solid rgb(205, 207, 223); padding: 4px 12px;
            float: left; opacity: 0.7; position: absolute;bottom: 6px;
            right: 12px;
        }
        /*导航按钮样式*/
        .nav a{
            float: left; display: block;height: 20px;line-height: 20px;width: 20px;border-image: 10px;border-image: 10px;
            border-radius: 10px;text-decoration: none;text-align: center;background: #f36;color: green;margin-left: 5px;

        }
        .nav a:hover{background: rgb(49, 27, 148); color: #fff;}
        </style>
        
    </head>
    <body>
        <div class="pic_box">
            <img src="自己图片的位置"/>
        <div class="nav">
            <a href="#1" class="links item first" title="w3cplus" target="_blank" id="first">1</a>
            <a href="http://www.baidu.com" class="links active item " title="test website" target="_blank" lang="zh">2</a>
            <a href="#3" class="links item "  title="this is a link" lang="zh-cn">3</a>
            <a href="#4" class="links item "  target="_blank" lang="zh-tw">4
            <a href="#5" class="links item "   lang="zh-cn">5</a>
            <a href="#6" class="links item "  title=" website link"  lang="zh">6</a>
            <a href="#7" class="links item "   title="open the website" lang="cn">7</a>
            <a href="#8" class="links item "    title="close the website" lang="en-zh">8</a>
            <a href="#9" class="links item "   title="http://www.baidu.com" target="_blank" >9 </a>
            <a href="#10" class="links item last"   id="last">10</a>

            </div>
        </div>
    </body>
</html>