CSS高级选择器

一、属性选择器

以value开头的att属性的E元素：E[att^="value"]{ ;}

a[href^=http]{background-color="red";}

css

a[href^=http]{background-color="red";
}

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

        a[href$=png]{background-color: red;}

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

        a[class*=links]{background-color: red;}

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背景都变红