• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • [attr*=val]

    版本:CSS3

    定义和用法

    • E[attr*=value],匹配元素属性值包含指定值的元素。

    语法:

    E[attr*=value]

    选择具有attr属性且属性值为包含val的字符串的E元素。

    浏览器支持

    所有浏览器都支持

    例子

    div[class*="b"]{border:2px solid #000;}
    
    //此例,将会命中所有div,因为匹配到了class属性,且属性值中都包含了b字符
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			*{
    				font-size:20px;
    			}
    			div[class*="test"]{
    				background-color:#66cdcc;
    				color:red;
    			}
    		</style>
    	</head>
    	<body>
    	<div class="first_test">第一个div元素。</div>
    	<div class="second">第二个div元素。</div>
    	<div class="test_1">第三个div元素。</div>
    	<pclass="test_2">这是段落中的文本。</p>
    	</body>
    </html>

    效果图:

    设置 class 属性值包含"test"的所有元素的背景色:

    实例

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			*{
    				font-size:20px;
    			}
    			[class*="test"]{
    				background-color:#f79578;
    			}
    		</style>
    	</head>
    	<body>
    	<div class="first_test">第一个div元素。</div>
    	<div class="second">第二个div元素。</div>
    	<div class="test_1">第三个div元素。</div>
    	<pclass="test_2">这是段落中的文本。</p>
    	</body>
    </html>

    效果图:

    上篇:[attr$=val]

    下篇:[attr|=val]