元素选择器
选择器分组
选择器分组在元素中间,为逗号。
通配符: 使用了通配符之后,如果没有指定标签特有的属性,那么以通配符为准
* {
}
类选择器
- 类选择器允许以一种独立与文档元素的方式来指定样式,例如.class{}
- 结合元素选择器
例如:a.class{} - 多类选择器
例如:.class.class{}
<a class="div">echo3D</a>
a.div{ color: blue;}
.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;
}
效果图:
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>
效果图:
后代选择器
- 后代选择器:后代选择器可以作为选择作为某元素后代的元素
<p>this is my <strong><i>hello</i></strong> page</p>
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)