033-复合选择器 | css3

liuzhengyuan

《零基础入门学习web开发》第33讲 还能这么玩 | 学习笔记

上一篇：032-朋友你会 ollie 吗？

---

复合选择器

---

标准代码：

1. <h1 class="a">aaaaaaaaaa</h1>
   
2. <h2 class="b">bbbbbbbbbbbbbbbb</h2>
   
3. <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod dolorem dicta, vitae voluptas</p>
   
4. <p class="a">aaaaaaaaaaaaaa<span class="x">x</span></p>
   
5. <span class="a">aaaaaaaaaaaaaa</span>
   
6. <p class="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbb<span id="y">y</span></p>

复制代码

---

1, 交集选择器

交集选择器：
element.class || element#id
{
    CSS 样式;
}

Style:

1. p.a {
   
2.         background-color: cornflowerblue;
   
3. }
   
4. h1.a {
   
5.         text-align: center;
   
6.         font-size: 40px;
   
7. }

复制代码

运行效果：

---

2, 并集选择器

并集选择器：
element1, element2, element3,...
{
    CSS 样式;
}

Style:

1. .x, #y {
   
2.         background-color: pink;
   
3.         color: red;
   
4. }

复制代码

效果：

---

把代码改一改：

1. <h1 class="a">aaaaaaaaaa</h1>
   
2. <h2 class="b">bbbbbbbbbbbbbbbb</h2>
   
3. <div>
   
4.     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod dolorem dicta, vitae voluptas</p>
   
5.     <p class="a">aaaaaaaaaaaaaa<span class="x">x</span></p>
   
6.     <span class="a">aaaaaaaaaaaaaa</span>
   
7. </div>
   
8. <p class="b">bbbbbbbbbbbbbbbbbbb<span id="y">y</span></p>

复制代码

3,后代选择器

后代选择器选择elment1元素内部的element2元素：
element1 element2 element3,...
{
    CSS 样式;
}
注意，中间空格不能漏

Style:

1. div p {
   
2.         border: 2px solid black;
   
3. }

复制代码

效果：

---

4,子元素选择器

子元素选择器，和后代选择器不一样，它只匹配直接子元素：
element1 > element2
{
    CSS 样式;
}

Style:

1. body > p {
   
2.         color: red;
   
3. }

复制代码

效果：

---

5,相邻兄弟选择器

相邻兄弟选择器 选择具有相同父元素且同级的element1相邻的element2
element1 + element2
{
    CSS 样式;
}

Style:

1. p.a + span {
   
2.         font-size: xx-large;
   
3. }

复制代码

效果：

---

6, 通用兄弟选择器

通用兄弟选择器 选择具有相同父元素且同级的element1之后的element2
它和相邻不一样，它匹配所有之后的选择器
element1 ~ element2
{
    CSS 样式;
}

Style:

1. h1.a ~ .b {
   
2.         font-style: italic;
   
3. }

复制代码

效果：

---

· 更多（吹水笔记-不二如是）  ·

· 课后作业  ·

下一篇：034-初学 css 的噩梦（I）