高級選擇器
## 5.5 后代選擇器
通過標簽之間的后代關系去決定選擇某個范圍內的元素
書寫方法:使用空格連續鏈接多級選擇器
<p style="color:red">后代選擇器優點:同一個盒子里的標簽比如A標簽,P標簽等會受影響,不是一個盒子里面A標P標簽等,不會受影響</p>
<h2>后代選擇器優點代碼案例:</h2>
```
.box p{
顏色位紅色
}
box盒子里所有顏色都會為紅色
但是.box盒子以外的p就不受樣式影響。
```
<br/><br/><br/>
基本使用:
```
.box ul li
{
}
.box2 ul li
{
}
```
需要注意的是,后代關系不一定是父子關系
## 交集選擇器
規則::交集選擇器由兩個選擇器構成,其中第一個為標簽選擇器,第二個為 class 選擇器,兩個選擇器之間不能有空格。<br/>
作用就是進行滿足所有選擇器條的匹配
```
一般用于公共樣式
比如給li設置一個盒子,
li{
width:500px;
float:left;
}
進行浮動后
然后LI class="xo"
xo為公共布局
這樣既有了li的樣式也有了xo公共樣式。
```
書寫方法:將多個選擇器鏈接書寫,中間沒有空格,不需要添加任何付號
```
div.p{
} //中間不能用空格
```
(必須要學好)
## 并集選擇器
有“和”的意思,多個標簽設置同樣的屬性
書寫方法:將多個選擇器使用逗號進行鏈接,最后一個不能加逗號
```
p,div{
color : red;
}
```
這樣P標簽和DIV標簽都一樣的樣式了
并集選擇器非常靈活,可以集合多個選擇器使用利用逗號進行分割
```
#par .par li,p{
color:red;
}
```
上面的代碼指的是#par里面的li和p標簽的文字顏色為紅色。
- 簡介
- 文字三屬性(顏色,字號,字體)
- 盒子三屬性(width , height, background-color)
- CSS引入方法
- CSS選擇器
- css高級選擇器
- CSS的繼承性
- 顏色屬性color
- 字體font-family
- 字號font-size
- 文字在盒子行高 line-height
- 字體加粗font-weight
- 字體樣式font-style
- 文本段落對齊text-align
- 文字修飾(上劃線下劃線中劃線 text-decoration)
- 文字縮進text-indent
- 盒子模型的寬度與高度width,height
- 內邊距padding
- 邊框border
- 外邊距margin
- 清除默認樣式
- 盒子height高度屬性拓展
- 文字在盒子里居中text-align:center
- 盒子在盒子里的水平居中
- margin塌陷
- 標準文檔流display
- 浮動float
- 浮動元素性質
- 浮動貼邊原理
- 浮動元素的標準流問題(文字圍邊效果)
- 清除浮動
- 清除浮動影響二: clear屬性
- 清除浮動overflow方法
- 偽類標簽
- background-color背景顏色屬性
- background-image 背景圖片調用
- background-repeat 背景圖平鋪狀態
- background-position背景定位
- background-attachment背景附著
- background綜合語法
- 相對定位position:relative
- 絕對定位position:absolute
- 定位壓蓋順序
- CSS制作LOGO超鏈接妙招
- CSS公共類的繼承性
- em單位
- 媒體查詢
- flex布局