CSS 属性选择器（重要）

最新推荐文章于 2024-09-05 22:06:38 发布

向阳的人生

最新推荐文章于 2024-09-05 22:06:38 发布

阅读量167

点赞数

分类专栏： Java CSS 文章标签： css3 属性选择器

本文链接：https://blog.csdn.net/weixin_45672377/article/details/111183631

版权

Java 同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

格式：标签[属性选择]{}

绝对相等属性（=）实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .Test a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        a[id = test03]{
            background: red;
        }

    </style>
</head>
<body>
<p class="Test">
    <a href="https://www.baidu.com" class="test test01" >1</a>
    <a href="" class="test" >2</a>
    <a href="image.png" id="test03" >3</a>
    <a href="image.pdf" class="test test01" >4</a>
    <a href="http" class="test test01 test04" >5</a>
    <a href="https://www.baiduyun.com" class="test" >6</a>
</p>
</body>
</html>

在这里插入图片描述

包含（*=）属性实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .Test a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        /*a[id = test03]{*/
        /*    background: red;*/
        /*}*/
        a[class *= test]{
            background: red;
        }

    </style>
</head>
<body>
<p class="Test">
    <a href="https://www.baidu.com" class="test test01" >1</a>
    <a href="" class="test" >2</a>
    <a href="image.png" id="test03" >3</a>
    <a href="image.pdf" class="test test01" >4</a>
    <a href="http" class="test test01 test04" >5</a>
    <a href="https://www.baiduyun.com" class="test" >6</a>
</p>
</body>
</html>

在这里插入图片描述

属性首部等于（^=）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .Test a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        /*a[id = test03]{*/
        /*    background: red;*/
        /*}*/
        /*a[class *= test]{*/
        /*    background: red;*/
        /*}*/
        a[href ^= image]{
            background: red;
        }

    </style>
</head>
<body>
<p class="Test">
    <a href="https://www.baidu.com" class="test test01" >1</a>
    <a href="" class="test" >2</a>
    <a href="image.png" id="test03" >3</a>
    <a href="image.pdf" class="test test01" >4</a>
    <a href="http" class="test test01 test04" >5</a>
    <a href="https://www.baiduyun.com" class="test" >6</a>
</p>
</body>
</html>

在这里插入图片描述

属性尾部等于（$=）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .Test a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        /*a[id = test03]{*/
        /*    background: red;*/
        /*}*/
        /*a[class *= test]{*/
        /*    background: red;*/
        /*}*/
        /*a[href ^= image]{*/
        /*    background: red;*/
        /*}*/
        a[href $= com]{
            background: red;
        }

    </style>
</head>
<body>
<p class="Test">
    <a href="https://www.baidu.com" class="test test01" >1</a>
    <a href="" class="test" >2</a>
    <a href="image.png" id="test03" >3</a>
    <a href="image.pdf" class="test test01" >4</a>
    <a href="http" class="test test01 test04" >5</a>
    <a href="https://www.baiduyun.com" class="test" >6</a>
</p>
</body>
</html>