一、属性选择器
以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背景都变红
二、关系选择器
子代选择器：E元素的直接下一级的所有子元素F，对下下级无效：E>F{ ;}
body>p{ background: pink; }
相邻兄弟选择器：E元素的下一个平级F元素，紧贴着E：E+F{ ;}
.active+p { background: green; }
普通兄弟选择器：E元素之后的所有平级元素F：E~F{ ;}
.active~p{ background: yellow; }
三：结构伪类选择器
四：链接伪类选择器
