CSS-属性选择器的用法详解

朱雀 2023-08-17 16:50 114阅读 0赞

属性选择器可以为拥有指定属性的 HTML 元素设置样式；属性选择器通过 `[]` 来定义，`[]` 内部为元素的属性，属性选择器的权重要高于标签选择器

*  `el[attr=val]` 选择 attr 为 val 的 el 元素
    
        /* 选择 div 下的 p 标签的 class 属性值为 blue 的元素 */
        div p[class="blue"] { 
        	background: blue;
        }
    
        <div>
          <p class="blue">p 标签</p>
          <p class="blue red">p 标签</p>
          <p class="blue">p 标签</p>
        </div>
    
    ![在这里插入图片描述][20190929172009116.png]
 *  `el[attr *= val]` 只要el 元素的 attr 属性值里含有 val 就能被选择
    
        .box a[class *= "download"]{ 
        	color: red;
        }
    
        <div class="box">
        	<a href="#" class="download">下载</a>
        	<a href="#" class="musicdownload">下载</a>
        	<a href="#" class="downloadmovie">下载</a>
        	<a href="#" class="image-download">下载</a>
        	<a href="#" class="flast download">下载</a>
        </div>
    
    ![在这里插入图片描述][20190929172922364.png]
 *  `el[attr ~= val]` el元素中的 attr 属性的属性值 val 单独存在 或 存在的属性值与其他属性值之间用空格隔开就能被选择
    
        .box a[class ~= "download"] { 
        	color: yellow;
        }
    
    ![在这里插入图片描述][2019092917353075.png]
 *  `el[attr |= val]` el 元素中 attr 属性的属性值单独存在或属性值之间用 “-” 隔开且属性值 val 在 “-” 前
    
        .box a[class |= "download"] { 
        	color: skyblue;
        	font-size: 20px;
        }
    
        <div class="box">
        	<a href="#" class="download">下载2</a>
        	<a href="#" class="music download">下载2</a>
        	<a href="#" class="image-download">下载2</a>
        	<a href="#" class="download-image">下载2</a>
        	<a href="#" class="downloadmovie">下载2</a>
        </div>
    
    ![在这里插入图片描述][20190929175738755.png]
 *  `el[attr ^= val]` el 元素的 attr 属性值里含有 val 且 val 在最前面才能被选择
    
        .box a[class ^= "download"] { 
        	color: pink;
        }
    
    ![在这里插入图片描述][20190929175843516.png]
 *  `el[attr $= val]` el 元素的 attr 属性值里含有 val 且 在最后面

.box a[class $= "download"]{ 
    	color: orange;
    }

![在这里插入图片描述][20190929180154812.png]

[20190929172009116.png]: /images/20230809/463035dbf93f497b98f142ebbbc8ef35.png
[20190929172922364.png]: /images/20230809/977a7f1431784712b40c08a977b688a4.png
[2019092917353075.png]: /images/20230809/a89fd44680ad482a946428e95f44e3dc.png
[20190929175738755.png]: /images/20230809/5b9f0217a1f841aa9bc279514ebe378f.png
[20190929175843516.png]: /images/20230809/d0296d311d204a1fa3118da33f09a95a.png
[20190929180154812.png]: /images/20230809/be512a63330e498497434b64b104a147.png