非零基础自学前端最后一遍一 HTML+CSS 8 CSS常见选择器 8.3 选择器-属性选择器

- 日理万妓 2024-03-25 14:11 60阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  8 CSS常见选择器
         *   *  8.3 选择器-属性选择器
             *   *  8.3.1 属性选择器(attribute selectors)

![在这里插入图片描述][aeae0e3d00d34acba4dc27cdc22bed56.png_pic_center]

#### 一 HTML+CSS ####

#### 8 CSS常见选择器 ####

##### 8.3 选择器-属性选择器 #####

###### 8.3.1 属性选择器(attribute selectors) ######

*  拥有某一个属性 \[att\]
 *  属性等于某个值 \[att=val\]
 *  其他了解的(不用记)
    
     *  \[attr\*=val\]: 属性值包含某一个值val;
     *  \[attr^=val\]: 属性值以val开头;
     *  \[attr$=val\]: 属性值以val结尾;
     *  \[attr|=val\]: 属性值等于val或者以val开头后面紧跟连接符-;
     *  \[attr~=val\]: 属性值包含val, 如果有其他值必须以空格和val分割;

> 用得其实不多

![在这里插入图片描述][b880bafebf4640b688b52f1d8957bdf7.png_pic_center]

![在这里插入图片描述][c6a4420ebb5e4d7b824f3419edc1e463.png_pic_center]

![在这里插入图片描述][647642b2b02349a48cf3b6d497369093.png_pic_center]

<!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>
      <style>
        [title] {
          
          color: red;
        }
    
        [title=div] {
          
          color: blue;
        }
      </style>
    </head>
    
    <body>
      <div>我是div元素</div>
      <div title="div">我也是div元素</div>
      <p>我是p元素</p>
      <h2 title="h2">我是h2元素</h2>
    </body>
    
    </html>

[aeae0e3d00d34acba4dc27cdc22bed56.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f26b8942c55c4f05b251cc46d6f9d14c.png
[b880bafebf4640b688b52f1d8957bdf7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/80da446c90ce4276b49863bc81aaec56.png
[c6a4420ebb5e4d7b824f3419edc1e463.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e72dd8af2a104952840d05477e508eef.png
[647642b2b02349a48cf3b6d497369093.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d40729337c1a4d5eba435da7070b72fb.png