CSS 屬性選擇器（重要）

阿新 • • 發佈：2020-12-15

格式：標籤[屬性選擇]{}

絕對相等屬性（=）例項

<!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>