提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

属性HTMLCSS 示例 语法 选择器 合集 有关
2023-09-11 14:15:11 时间 
<!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>

相关文章