ID 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

1
2
3
4
#myID{
color: red;
}
<p id="myID">这个一句话</p>

注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示：

1
2
3
4
5
6
7
8
.myClass{
color: yellow;
}
.myclass2{
font-size: 35px;
}
<p class="myClass">这个一句话</p>
<p class="myClass myclass2">这个一句话</p>

一个class可以有多个值，css样式进行叠加

标签选择器

根据页面上面的标准来设置style样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ul{
font-size: 18px;
color: green;
}```

```css
<ul>
 <li>第一点</li>
 <li>第二点</li>
</ul>```

## 复合选择器
复合选择器：由两个或多个基础选择器，通过不同的方式组合而成
方式一：在都满足条件下进行展示效果

```css
p.myclass3{
    color: red;
}
1
2
<p class=”myclass3”>选择的是我</p>
<h5 class=”myclass3”>选择的不是我</h5>

方式二：后代选择器，包含选择器，从首选择器一次向后查找，不区分第一级还是第二级

1
2
3
.myclass4 p{
    color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
<div class="myclass4">
 <p>我被选择了</p>
 <p>我还是也被选择了</p>
 <div><p>我是下一级还是被选择了</p></div>
</div>```

方式三：并集选择器，多个选择直接使用’,’隔开,满足其中的一个条件

```css
h2, h3{
    color: red;
}
1
2
<h2>我被并集选择器选择</h2>
<h3>我也并集选择器选择</h3>

方式四：子代选择器，使用’>’连接选择器，严格的顺序，对子级元素不展示

1
2
3
.myclass5>p{
    color: red;
}
1
2
3
4
5
<div class="myclass5">
 <p>子代选择器</P>
 <p>子代选择器</P>
 <div><p>我不会被选择</p></div>
</div>

属性选择器

1
2
3
4
5
6
p[id]{
    color: yellow;
}
p[id="myh2"]{
    color: yellow;
}
1
<h2 id="myh2">我被并集选择器选择</h2>

同时拥有多个属性方式

1
2
3
[id][class]{
    color: yellow;
}