属性选择器（学自b站狂神，后附链接）

最新推荐文章于 2023-04-11 16:58:15 发布

TxbLcy

最新推荐文章于 2023-04-11 16:58:15 发布

阅读量253

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/TxbLcy/article/details/106085569

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

id+class选择器的完美结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

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

        /*属性名. 属性名=属性值(正则)
        = 绝对等于
        *=包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */

        /*a标签存在id属性的元素*/
        a[id] {
            background: yellow;
        }
        /*a标签有id属性是first的*/
        a[id=first] {
            background: green;
        }
        /*a标签有class是active的*/
        a[class*="links"]{
            background: red;
        }

        /*选中href中以http开头的元素*/
        a[href^=http] {
            background: green;
        }

        /*在a标签中的href以c结尾的*/
        a[href$=c]{
            background: cadetblue;
        }

    </style>

</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="images/123.html" class="links item active">2</a>
    <a href="images/123.png" class="links item">3</a>
    <a href="images/123.jpg" class="links item">4</a>
    <a href="abc" class="links item">5</a>
    <a href="/a.pdf" class="links item">6</a>
    <a href="/abc.pdf" class="links item">7</a>
    <a href="abc.doc" class="links item">8</a>
    <a href="acd.doc" class="links item">9</a>
    <a href="http://blog.com" class="links item first">10</a>
</p>

</body>
</html>

在这里插入图片描述
https://www.bilibili.com/video/BV1YJ411a7dy/?p=8

TxbLcy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
属性选择器（学自b站狂神，后附链接）

id+class选择器的完美结合<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .demo a{ float: left; display: block; height: 50
复制链接

扫一扫