【Css】Css有关html“属性选择器”的语法合集（示例）

最新推荐文章于 2024-01-14 11:54:30 发布

敦厚的曹操

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量377

点赞数

分类专栏： 4.【html】 5.【css】文章标签： css html 属性选择器

本文链接：https://blog.csdn.net/dxnn520/article/details/122181998

版权

5.【css】同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

<!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>
</head>
 
<style>
 
    p,h3{color: rgb(0, 0, 0);}
 
    /* 根据【属性名】选择设定 */
 
        /*所有title属性*/
        [title]{color:blue};  

        /*所有P标签title属性*/
        P[title]{color:blue};  

        /*所有title属性*/
        [align]{color:rgb(206, 106, 12)};  

 
    /* 根据【属性名和属性值】选择设定 */

        /*所有title=p2属性*/
        [title=p2]{color:rgb(23, 131, 1)};  

        /*所有P标签中title=p3属性*/
        p[title=p3]{color:rgb(155, 13, 155)};  

        /*所有P标签中title=p3属性*/
        p[title=p3]{color:rgb(155, 13, 155)};  

        /*所有P标签中title中包含P开头的属性*/
        p[title^=p]{color:rgb(33, 170, 6)};  
        
</style>
 
<body>
        
    <H1> 李白的诗</H1>
    <div>-----------------------</div>
    <div title="点击我">==================</div>
 
    <p title="p1">白日依山尽 </p>
    <p title="p2">黄河入海流 </p>
    <h3 align="center"> 欲穷千里目</h3>
    <p title="B3">更上一层楼 </p>
 
    <div>==================</div>

</body>
</html>

敦厚的曹操

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Css】Css有关html“属性选择器”的语法合集（示例）

<!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>Do.
复制链接

扫一扫