CSS8：属性选择器-重要

最新推荐文章于 2023-04-18 19:23:07 发布

工一木子

最新推荐文章于 2023-04-18 19:23:07 发布

阅读量169

点赞数

分类专栏： CSS学习

本文链接：https://blog.csdn.net/Prince140678/article/details/119851207

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

8、属性选择器-重要

2.4、属性选择器（常用）

id+class结合~

代码show

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            .demo a {
                float: left;
                display: block;
                height: 50px;
                width: 50px;
                border-radius: 10px;
                background: brown;
                text-align: center;
                color: #11800e;
                text-decoration: none;
                margin-right: 5px;
                font: bold 20px/50px Arial;

            }
            /*  属性名，属性名=属性值（正则）
              = 绝对等于
              *=包含这个元素
              ^=以这个开头
              $=以这个结尾*/
            /*存在id属性的元素 a[]{}*/
           /* a[id] {
                background: orange;
            }*/
            /*id=first的元素*/
           /* a[id=first] {
                background: black;
            }*/
            /*class中有links的元素*/
           /* a[class*="links"] {
                background: yellow;
            }*/
            /*选中href中以http开头的元素*/
          /*  a[href^=http] {
                background: #71805e;
            }*/
            /*选中href中以jpg个结尾的元素*/
            a[href$=jpg] {
                background: gray;
            }
        </style>
    </head>
    <body>
       <p class="demo">
           <a href="http://www.baidu.com" class="links item first" id="first">1</a>
           <a href="" class="links item active" target="_blank" title="test">2</a>
           <a href="images/123.html" class="links item">3</a>
           <a href="images/123.png" class="links item">4</a>
           <a href="images/123.jpg" class="links item">5</a>
           <a href="abc" class="links item">6</a>
           <a href="/a.pdf" class="links item">7</a>
           <a href="/a.doc" class="links item">8</a>
           <a href="/a.jpg" class="links item">9</a>
           <a href="/a.docx" class="links item">10</a>

       </p>

    </body>
</html>

效果图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wh9RXMf3-1629607508707)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\8、属性选择器-重要.assets\image-20210822124406622.png)]$

工一木子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS8：属性选择器-重要

8、属性选择器-重要2.4、属性选择器（常用）id+class结合~代码showindex.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a {
复制链接

扫一扫

专栏目录