最近有点忙，所以没有发表博文，现在时间空闲下来了，好好的整理一下知识，今天总结一下css里面的一些选择器。
css里的选择器有好多种，下面我就把我了解到的写一写，如果有不全的或者有误的欢迎留言指正，万分感谢。
一、选择器
1、* 通配符选择器
这个选择器是匹配页面中所有的元素，一般用来清除浏览器的默认样式.
*{margin:0; padding:0}2、元素选择器
通过标签名来选择元素。
div{width:100px; height:100px;}3、class选择器
class选择器 / 类选择器 / 用class属性给元素命名，在页面中可以出现很多次，相当于人的名字。
.box{width:100px; height:100px;}<div class="box"></div><p class="box"></p>4、 id选择器
以id属性来命名，在页面中只能出现一次，具有唯一性，并且权重值最高，相当于一个人的身份证。
#box{width:100px; height:100px;}<div id="box"></div>二、高级选择器 一
1、 E F 后代选择器
匹配到E元素下面的所有的F元素（包括子、孙），空格隔开。
div ul li {width:100px; height:100px;}
//匹配到div下面的所有ul，且ul的所有后代li<div> <ul> <li></li> <li></li> </ul></div> 2、 E,F 多元素选择器
同时匹配到E元素和F元素，用逗号隔开。
div,#box{width:100px; height:100px; background:#000;}//同时匹配到下文中的div标签和id为box的p标签<div></div><p id="box"></p>3、E>F 子元素选择器
选择到E元素的直接子代F，只选择子代。
ul>li{width:100px; height:100px;}
<ul>
<li>
</li>
</ul>4、E+F（毗邻选择器） 相邻兄弟选择器
紧接在E元素后面的同级元素F，相邻兄弟选择器，有相同的父级。
div+.box{width:100px; height:100px; background:pink;}//这个只能选择到下面第二行的那个p元素 最后一个不满足紧接在div元素后面这个条件 <div></div> <p class="box"></p> <p class="box"></p> <div></div> <p></p> <p class="box"></p>
div p + p{ width:100px; height:100px; margin-top:2px; background:pink;} //这个可以选择到下面除了第一个p元素外其他所有的元素。 <div> <p></p> <p></p> <p></p> <p></p> </div>三、高级选择器 二 属性选择器
1、 E[attr] 匹配具有attr属性的E元素
div[title]{ width:100px; height:100px; margin-top:2px; background:pink;} //匹配到下文中的第一个和第三个div元素 因为他们含有title属性 <div title="width"></div> <div></div> <div title="height"></div>2、E[attr=val]
匹配具有attr属性且值只为val的的E元素（注意 属性值要用引号引起来，我自己试了试好像不用括号也可以。）
div[title="height"]{ width:100px; height:100px; margin-top:2px; background:pink;
} //匹配到下文中的第三个div元素 <div title="width"></div> <div></div> <div title="height"></div>3、E[attr~=val]
匹配属性值为attr，并包含这个值的E元素，用于选取属性值中包含指定词汇的元素。
div[class~="c1"]{ width:100px; height:100px; margin-top:2px; background:pink;} //选择到下方第一个和第二个div元素 <div class="c1"></div> <div class="c1 c2"></div> <div class="c2c1"></div>4、E[attr|=val]
匹配所有属性为attr，值为val或者以 var- 开头的E元素
div[class|="c1"]{ width:100px; height:100px; margin-top:2px; background:pink;}//选择到下面当中的第一个和第三个元素 <div class="c1"></div> <div class="c1cs"></div> <div class="c1-c2"></div>5、E[attr][attr2=val]匹配所有 有attr1属性 且有attr2属性，且attr2的值为val的E元素，这个就是写出几个属性选择器，并且都要同时满足他们的条件。
div[title="width"][class]{ width:100px; height:100px; margin-top:2px; background:pink;} //选择到下面的第一个div元素 <div title="width" class="box"></div> <div title="width"></div>四、a伪类选择器
1、 :link 匹配所有未被点击的链接 a:link{ color: green; }2、：hover 匹配鼠标悬停在其上的元素 a:hover{ color: gold; }3、：active 匹配鼠标按下还没有释放的元素 a:active{ color: blue; }4、：visited 匹配所有已经被点击的链接a:visited{ color: red; }hover的使用，只是一个选择器，一定是他的后代。
.box{ width:100px; height: 100px; color:#fff; background: #000;}
.box:hover p{ color:red;}//鼠标移动div上，p字体的颜色改变 <div class="box"> <p>我的字体</p> </div>2. a伪元素选择器
1> ：before 在元素
div:before{ content: "before插入的元素";}//在div所有元素的最前面插入这个 <div>
<p>这个是p</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。