CSS选择器

● 元素选择器
● 选择器分组
● 类选择器
● ID选择器
● 属性选择器
● 后代选择器
● 子元素选择器
● 相邻兄弟选择器

元素选择器

p{
    color: red;
    font-size: 30px;
}
<p> this is a p! </p>

选择器分组

h1,h2{}

类选择器

类选择器语允许以一种独立与文档元素的方式来制定样式

.class{}

结合元素选择器

p.class{}

p.pClass{
    color: red;
    font-size: 30px;
}
p{
    background-color: antiquewhite;
}
<p class="pClass"> this is a p! </p>
<p > this is a p! </p>

多类选择器

.class.class{ }
.p1{
   color: blue;
}
.p2{
    font-size: 30px;
}
.p1.p2{
    font-style: italic;
}

<p class="p1"> this is a p1! </p>
<p class="p2"> this is a p2! </p>
<p class="p1 p2"> this is a p1 and p2! </p>

ID选择器

#id{}

id选择器和class选择器的区别
1.ID选择器只能在文档中使用一次，而类选择器可以在文档中使用多次。 很多时候ID来构建一个框架，而类来构建一个属性。
2.同时从数据的加载角度来看，可以知道ID选择器是先找到结构，再找到内容，最后才去渲染。 而类是先去渲染，再找到结构，再找到内容。
3.ID选择器不能结合使用。

属性选择器

简单属性选择[title]{}

[title]{
       color: #ff0000;
}
<p title=""> this is a p! </p>

根据属性值选择

a[href="http://www.baidu.com"]{
        color: #FF0000;
        font-size: 30px;
}
<a href="http://www.baidu.com">百度</a></br>
<a href="http://www.error.com">错误</a></br>

属性和属性值完全匹配

[title="t"]{
       color: #ff0000;
}
<p title="t"> this is a p! </p>

根据部分属性值选择

[title="title"]{
       color: #ff0000;
}
<p title="titl"> this is a p! </p>

后代选择器

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

p strong{
    font-size: 30px;
}
<p > this is a <strong>p!</strong> </p>

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素

h1 > strong{}
h1 > strong{
    color: blue;
    font-size: 50px;
}
h1 strong{
    color: blue;
    font-size: 50px;
}
<h1 > this is a <strong>p!</strong> </h1>
<p> this is a <strong>p!</strong> </h1>

相邻兄弟选择器

可以选择紧接在另一个元素后的元素，且二者有相同父元素

h1 + p {}       

li + li{
    color: #ff0000;
    font-size: 30px;
}
<ul>
    <li>apple</li>
    <li>apple</li>
    <li>apple</li>
</ul>