属性选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        /* 
        子元素选择器
            语法：父元素>子元素
        */
        div>span>p{
            color: aqua;
        }

        /* 
        [属性名]选择含有指定元素的属性 
        [属性名=属性值]选择含有指定元素的属性且指定属性值
        [属性名^=属性值] 选择属性值以指定值开头的元素
        [属性名$=属性值] 选择属性值以指定值开头的元素
        [属性名*=属性值] 选择属性值含有某值得元素
        */
        /* *[title]{
            color:blue;
        } */
        p[title=ab]{
            color: yellow;
        }

        p[title^=abc]{
            font-size: 30px;
        }
        p[title*=e]{
            font-size: 50px;
        }
    </style>
</head>
<body>
  <!-- 
      父元素
            直接包含子元素的元素
      子元素
            直接被父元素包含的元素
      祖先元素
            直接或间接包含子元素的元素
      后代元素
            直接或间接被父元素包含的元素
      兄弟元素
            有相同父元素的元素
   -->

   <div>
       <span >
           <p title="abc">学习真的好难啊</p>
       </span>
       <p title="ab">但是收获颇多</p>
       <p title="abced">但是都没有时间打游戏了</p>
   </div>
</body>
</html>

 

posted @ 2022-04-09 18:59  Eveeee  阅读(34)  评论(0)    收藏  举报