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

最新推荐文章于 2024-09-04 20:29:03 发布

丰。。

最新推荐文章于 2024-09-04 20:29:03 发布

阅读量438

点赞数 2

分类专栏：计算机网络原理爬虫学习笔记文章标签： css 前端

本文链接：https://blog.csdn.net/CSDNXXCQ/article/details/121065109

版权

爬虫学习笔记同时被 2 个专栏收录

66 篇文章 3 订阅

订阅专栏

计算机网络原理

57 篇文章 1 订阅

订阅专栏

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