前端学习笔记-11-案例CSS属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*!*将所有含有属性名是username的标签背景色改为红色*!*/
        [username] {  
         background-color: red;
        }
         /*   !*找到所有属性名是username并且属性值是资本家A的标签*!*/
         /* [username='资本家A'] {     background-color: orange;*/
        /*}*/

        /*input[username='资本家A'] {  !*找到所有属性名是username并且属性值是资本家A的input标签*!*/
        /*    background-color: wheat;*/
        /*}*/
    </style>
</head>
<body>
    <input type="text" username>
    <input type="text" username="jason">
    <input type="text" username="kevin">
    <p username="资本家A">资本家A</p>
    <div username="资本家B">资本家B</div>
    <span username="资本家C">资本家C</span>
</body>
</html>

效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

         /*   !*找到所有属性名是username并且属性值是资本家A的标签*!*/
 [username='资本家A'] {     background-color: orange;*/
        /*}*/

        /*input[username='资本家A'] {  !*找到所有属性名是username并且属性值是资本家A的input标签*!*/
        /*    background-color: wheat;*/
        /*}*/
    </style>
</head>
<body>
    <input type="text" username>
    <input type="text" username="资本家A">
    <input type="text" username="资本家B">
    <p username="资本家A">资本家A</p>
    <div username="资本家B">资本家B</div>
    <span username="资本家C">资本家C</span>
</body>
</html>

效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>



input[username='资本家A'] {  !*找到所有属性名是username并且属性值是资本家A的input标签*!*/
         background-color: wheat;*/
}
    </style>
</head>
<body>
    <input type="text" username>
    <input type="text" username="资本家A">
    <input type="text" username="资本家B">
    <p username="资本家A">资本家A</p>
    <div username="资本家B">资本家B</div>
    <span username="资本家C">资本家C</span>
</body>
</html>

效果
在这里插入图片描述

版权声明：本文为CSDNXXCQ原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。