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

    版本:CSS3

    定义和用法

    • E[attr$=value],匹配元素属性值带指定的值结尾的元素。

    语法:

    E[attr$=value]

    选择具有attr属性且属性值为以value结尾的字符串的E元素。

    浏览器支持

    所有浏览器都支持

    例子

    div[class$="c"]{border:2px solid #000;}
    
    //此例匹配到了class属性,且属性值以c结尾
    
    <!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">第三个div元素。</div>
    	<pclass="test">这是段落中的文本。</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">第三个div元素。</div>
    	<pclass="test">这是段落中的文本。</p>
    	</body>
    </html>

    效果图:

    上篇:[attr^=val]

    下篇:[attr*=val]