css选择器

目录

• 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选择器和类选择器的区别

1. id只能在文档中使用一次，类选择器可以多次使用
2. id选择器不能结合使用
3. 当使用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样式会改变