CSS选择器详解

选择器.png

元素选择器

元素选择器.png

选择器分组

选择器分组在元素中间，为逗号。
通配符：使用了通配符之后，如果没有指定标签特有的属性，那么以通配符为准

*  {

}

类选择器

类选择器允许以一种独立与文档元素的方式来指定样式，例如.class{}
结合元素选择器
例如：a.class{}
多类选择器
例如：.class.class{}

<a class="div">echo3D</a>

a.div{    color: blue;}

结合元素选择器.png

.class.class{}

<p class="p1">hello</p>
<p class="p2">hello</p>
<p class="p1 p2">hello</p>

.p1{   
 color:  blue;
}
.p2{  
  font-size:  40px;
}
.p1.p2{     //会继承p1 p2的属性，也可以自己设置，
 font-style: italic;
}

效果图：

class.class{}.png

ID选择器

ID 选择器
ID 选择器类似于类选择器，不过也有一些重要差别，例如：#id{}
类选择器与ID选择器的区别：
ID 选择器在文档中使用一次，而类可以多次使用
ID 选择器不能结合使用
当使用JS的时候，需要用到ID，因为JS方法中有个getElementByID

属性选择器详解

简单属性详解
例如：[title]{}

<p title ="p1">hello</p>
<style> 
       [title]{
        color: red;    
}

根据具体属性值选择：
除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特性属性值的元素，例如：a[href = "www.echo.com"]{}
属性和属性值必须完全匹配
根据部分属性值选择

根据部分属性值选择，通过[title~="title"]模糊查询，主要属性值包含title就会做出相应的改变

[title~="title"]{    
font-size: 50px;
}
<p title ="tit">hello</p>
<p title ="title">hello</p>
<p title ="title hello">hello</p>
<p title ="t">hello</p>

效果图：

属性选择器值模糊查询.png

后代选择器

后代选择器：后代选择器可以作为选择作为某元素后代的元素

this is my hello page
p strong i{ //通过 p i 也能找到
color: blue;
}

效果图：

![后代选择器.png](http://upload-images.jianshu.io/upload_images/1694376-b31b757c40fb59d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


>子元素选择器

与后代选择器相比，子元素选择器只能作为某元素子元素的元素例如：h1>strong{};

以上面的例子为例，如果通过子元素选择器要找到i标签 必须通过这样：

p>strong>i{
color: fuchsia; font-size: 30px;
}


>相邻兄弟选择器

  可选择紧接在另一个元素后的元素，且二者有相同元素，例如：h1 +p{};

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
li+li{
font-size: 50px; color: brown;

}

效果图

![](http://upload-images.jianshu.io/upload_images/1694376-c4ddb81fcec0d35b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

CSS选择器详解

推荐阅读更多精彩内容