目录
- 1、元素选择器
- 2、选择器分组
- 3、类选择器
- 结合元素选择器使用：
- 多类选择器
- 4、ID选择器
- ID选择器和类选择器的区别
- 5、属性选择器
- 6、后代选择器
- 7、子元素选择器
- 8、相邻兄弟选择器
1、元素选择器
h1{}，a{} 这类型的都会被影响
2、选择器分组
*{} 通配符 所有的标签都会被影响
h1,h2{} h1和h2都会被影响
3、类选择器
.class{} 根据元素的类对元素进行样式更改
结合元素选择器使用：
a.class{} 通过制定标签的指定类对元素进行样式更改
多类选择器
.class.class{}
html
<p class="p1">fffffffffff</p>
<p class="p2">fffffffffff</p>
<p class="p1 p2">fffffffffff</p>
css
.p1{
color：red;
}
.p2{
font-size:30px;
}
.p1.p2{
font-style:italic;
}
class 为 p1 p2 的p标签会拥有p1的颜色，p2的字体大小,.p1.p2的斜体
4、ID选择器
‘#tst{}’ id为tst的标签（id不能重复）
ID选择器和类选择器的区别
- id只能在文档中使用一次，类选择器可以多次使用
- id选择器不能结合使用
- 当使用js时候，需要用到id
5、属性选择器
[title]{} 属性为title的标签会改变样式
根据具体的属性值选择
只选择有特定属性值得元素 例如：a[href="www.baidu.com"]
属性和属性值必须完全匹配
根据部分属性值选择
//css
[title~="title"]{
font-size:30px;
}
//html
<p title="tit">hello</p>
<p title="title">hello</p>
<p title="t">hello</p>
<p title="title hello">hello</p>
第二和第四个字体会变大
6、后代选择器
可以选择作为某元素后代的元素
//css
p strong{
color:red;
}
//html
<p>这是什么<strong>鬼</strong></p>
//p标签包含的strong标签内容颜色会改变
//css
p i{
color:red;
}
//html
<p>这是什么<strong>鬼<i>啊</i>鬼</strong></p>
p标签包含的i标签内容颜色会改变 (只要是p标签里的后代，颜色就会改变)
7、子元素选择器
只能选择作为某元素子元素的元素
//css
p>strong{
color:red;
}
//html
<p>这是什么<strong>鬼</strong></p>
//p标签包含的strong标签内容颜色会改变
//css
p>i{
color:red;
}
//html
<p>这是什么<strong>鬼<i>啊</i>鬼</strong></p>
p标签包含的i标签内容颜色不会改变 (必须是p标签的子元素，只能选一个层级关系的，不能隔代 可通过p>strong>i找到)
8、相邻兄弟选择器
可选择进阶在另一个元素后的元素，且二者有相同父元素
//css
li+li{
color:red;
}
//html
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
//item2和item3样式会改变（必须拥有相同的父级元素）
<ol>
<li>i1</li>
<li>i2</li>
<li>i3</li>
</ol>
//i2和i3样式会改变
