一、属性选择器
以value开头的att属性的E元素:E[att^="value"]{ ;}
a[href^=http]{background-color="red";}
css
css
a[href^=http]{
background-color="red";
}
html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a[href^=http]{
background-color: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" >1</a>
<!-- 1背景变红 -->
<a href class="active item" title="test website" target=" blank">2</a>
<a href="sites/file/test.html" class="links item">3</a>
<a href="sites/file/test.png" class="links item"> 4</a>
<a href="sites/file/image,ipg" class="links item">5</a>
</p>
</body>
</html>
结果,1背景变红
以value结尾的att属性的E元素:E[att$="value"]{ ;}
a[href$=png]{background-color: red;}
css
css
a[href$=png]{
background-color: red;
}
html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a[href$=png]{
background-color: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" >1</a>
<a href class="active item" title="test website" target=" blank">2</a>
<a href="sites/file/test.html" class="links item">3</a>
<a href="sites/file/test.png" class="links item"> 4</a>
<!-- 4背景变红 -->
<a href="sites/file/image,ipg" class="links item">5</a>
</p>
</body>
</html>
结果,4背景变红
含有value的att属性的E元素:E[att*="value"] { ;}
a[class*=links] { background: red; }
css
css
a[class*=links]{
background-color: red;
}
html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a[class*=links]{
background-color: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" >1</a>
<a href class="active item" title="test website" target=" blank">2</a>
<!-- 除了2背景都变红 -->
<a href="sites/file/test.html" class="links item">3</a>
<a href="sites/file/test.png" class="links item"> 4</a>
<a href="sites/file/image,ipg" class="links item">5</a>
</p>
</body>
</html>
除了2背景都变红