选择器.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
后代选择器
- 后代选择器：后代选择器可以作为选择作为某元素后代的元素
<p>this is my <strong><i>hello</i></strong> page</p>
p strong i{ //通过 p i 也能找到
color: blue;
}
效果图：
>子元素选择器
与后代选择器相比，子元素选择器只能作为某元素子元素的元素例如：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;
}
效果图
