CSS3 属性选择器-CSDN博客

本文链接：https://blog.csdn.net/YFxiaogui/article/details/132358568

选择符	简介
input[value]	选择具有value属性的input元素
input[value="text"]	选择具有value属性且type属性值等于text的input元素
input[value^="text"]	选择具有value属性且值以text开头的input元素
input[value$="text"]	选择具有value属性且值以text结尾的input元素
input[value*="text"]	选择具有value属性且值中含有text的input元素

一、选择具有type属性的input元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[value] {
            color: pink;
        }
    </style>
</head>

<body>
    /*效果为所有输入框文字颜色为pink*/
    <input value="text">
    <input value="boss">
</body>

</html>

二、选择具有value属性且type属性值等于text的input元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[value="text"] {
            color: pink;
        }
    </style>
</head>

<body>
    /*效果为第一个输入框文字颜色为pink*/
    <input value="text">
    <input value="boss">
</body>

</html>

三、选择具有value属性且值以text开头的input元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[value^="text"] {
            color: pink;
        }
    </style>
</head>

<body>
    /*效果为第一个和第二个输入框文字颜色为pink*/
    <input value="text">
    <input value="text-boss">
    <input value="boss">
</body>

</html>

四、选择具有value属性且值以text结尾的input元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[value$="text"] {
            color: pink;
        }
    </style>
</head>

<body>
    /*效果为第一个和第二个输入框文字颜色为pink*/
    <input value="text">
    <input value="boss-text">
    <input value="boss">
</body>

</html>

五、选择具有value属性且值中含有text的input元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[value*="text"] {
            color: pink;
        }
    </style>
</head>

<body>
    /*效果为第一个、第二个和第三个输入框文字颜色为pink*/
    <input value="text">
    <input value="boss-text">
    <input value="text-boss">
    <input value="boss">
</body>

</html>