從零開始的前端生活--css基礎
選擇器
選擇器是用來選擇對應的html元素，
-
類選擇器 以" . "為開頭的選擇器，很多元素可以共用同一個類選擇器
-
ID選擇器 以" # "為開頭的選擇器，一般指向唯一元素
-
屬性選擇器 含有[] 的選擇器
<span class="item one">1</span> <span class="item">2</span> <span class="item three">3</span> <span class="item">4</span> <span class="item">5</span> span[] { // 屬性選擇器，選擇類名為item,當然不僅僅是class，只要是屬性都可以，例如input的type color: red; //當class的值等于item時，字體設定為紅色 }
[ attr ] 選中包含某個屬性的元素
[ attr = value ] 選中屬性值等于某個值的元素
[ attr ~= value ] 選中某些元素的屬性值attr 含有value 這詞匯
[ attr ^= value ] 選中屬性值以 value 開頭的元素
[ attr $= value ] 選中屬性值以value結尾的元素
[ attr *= vlalue ] 選中屬性值包含value的元素
[ attr |= value] 選中以指定值開頭的元素，該值為完整的單詞
-
偽類選擇器
一般是前有：的選擇器
:active 選中被激活的元素 :focus 選中聚焦的元素 :hover 選中滑鼠懸浮在上面的元素 :link 向未被訪問的連接添加樣式 :visited 向已被訪問的連接添加樣式 :first-child 向元素的第一個子元素添加樣式 :lang 向帶有lang屬性的元素添加樣式 :empty 選中里面無內容的元素
<input type="text"> <input type="text"> input:focus { // 選擇 聚焦的 表單 color: red; }注：empty是選中無內容的元素，如<div></div>這種，不會被他的偽元素內容所左右，
-
偽元素選擇器
| :: first-line | 向文本的首行添加樣式 |
|---|---|
| :: first-letter | 向文本的第一個字母添加樣式 |
| :: before | 在元素的前面添加內容 |
| :: after | 在元素后面添加內容 |
.after::after {
content: "";// after 和 before 要有content
width: 10px;
height: 10px;
background-color: red;
display: block;
}
關系選擇器
- 后代選擇器 空格連接 比如：div p 就是選擇div里面的p標簽
- 相鄰后代選擇器（子類選擇器） 僅僅選擇合乎規則的兒子元素，孫子和重孫就沒有選擇了（與后代選擇器區別)> 連接
- 兄弟選擇器 選擇當前元素==后面==的所有的合乎規則的兄弟元素 ~ 連接
- 相鄰兄弟選擇器 選擇當前元素相鄰的那個合乎規則的兄弟元素 用 + 連接
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34110.html
標籤：Html/Css