1. 選擇器的分類
- 基礎選擇器:
-
* {font-size:16px;}通用選擇器 -
p {font-family:arial;}標簽選擇器 -
.error {font-weight:bold;}class選擇器 -
#correct {font-style:italic;}ID選擇器
-
- 組合選擇器
-
div,p {background-attachment:fixed;}多元素選擇器 -
div a {background-color:blue;}后代元素選擇器 -
div>p {background-image:url(xxx.gif)}子元素選擇器 -
p+div {background-position:x% y%}毗鄰元素選擇器
-
- 屬性選擇器
- E[att]
- E[att=val]
- E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素
- E[att｜=val] 匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以“val”開頭的E元素
- 偽類選擇器
- E:first-child 匹配父元素E下的第一個子元素
E:first-child {text-align:center;} - E:link 匹配所有未被點擊的鏈接
- E:link 匹配所有未被點擊的鏈接
- E:active 匹配鼠標已經按下、還沒有釋放的E元素
- E:hover 匹配鼠標懸停其上的E元素
- E:focus 匹配獲得當前焦點的E元素
- E:lang(c) 匹配lang屬性等于c的E元素
- E:first-child 匹配父元素E下的第一個子元素
- 偽元素
- E:first-line 匹配E元素的第一行
- E:first-letter 匹配E元素的第一個字母
- E:before 在E元素之前插入生成的內容
E:before {content:"sometext you want to add";display:block;;height:40px;width:40px;}
- E:after在E元素之后插入生成的內容
E:after {content:"sometext you want to add";display:block;;height:40px;width:40px;}
2. :first-child和:first-of-type的作用和區別?
:first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。
:first-of-type 匹配的是某父元素下相同類型子元素中的第一個。
Paste_Image.png
3. text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中?
作用是讓文本或者行內元素如（< a >< img >< span >標簽）水平居中。作用在（塊級元素），（表格單元格）以及（通過display擁有塊元素特性或表格特性的行內元素）上。
Paste_Image.png
