1、 css相鄰元素選擇器,box在HTML中的意思?
這是個CSS的相鄰同胞選擇器。 .box + .box 意思就是:選擇緊鄰第一個box元素的同胞box元素。 這倆類名一樣,解釋起來有點混亂。 我舉個例子。 例如: 標題 標題
文章段落
如果我這么寫:.box1 + h1 ,那么我選擇的就是類名叫.h1-1的元素。 如果:.box2 + h1 ,它不會選擇任何元素,因為.box2的下面沒有一個叫h1的同胞元素。 如果:h1 + div ,那么會選擇.box2的div元素。 第一個元素 + 第二個元素 這個選擇器只會選擇 緊鄰第一個元素 并且是在第一個元素下面的同胞級元素 上面那段代碼,如果你寫 :.box1 + .box2 將沒有效果,因為他們中間夾了個h1元素。 但是有一個選擇器可以實現,就是.box1 ~ .box2 同胞選擇器。 能力有限,不知幫到了嗎?2、 css獲取后幾個元素?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#nth-test div:nth-child(-n + 4) {
background-color: red;
}
</style>
</head>
<body>
<div id="nth-test">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
選前四個
#nth-test div:nth-child(-n + 4) { background-color: red; }
選弟3個往后
#nth-test div:nth-child(n + 3) { background-color: red; }
3、 css元素的排列規則主要分為那兩種元素?
標準流指的是在不使用其他的與排列和定位相關的特殊CSS規則時,各種元素的排列規則。HTML文檔中的元素可以分為兩大類:行內元素和塊級元素。
1.行內元素不占據單獨的空間,依附于塊級元素,行內元素沒有自己的區域。它同樣是DOM樹中的一個節點,在這一點上行內元素和塊級元素是沒有區別的。
2.塊級元素總是以塊的形式表現出來,并且跟同級的兄弟塊依次豎直排列,左右自動伸展,直到包含它的元素的邊界,在水平方向不能并排。
4、 CSS偽元素有哪些不得了的用法?
先列出CSS中常用的偽類
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標劃過鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */
:checked 選擇所有選中的表單元素
:disabled 選擇所有禁用的表單元素
p:first-child 父元素中第一個p元素
比如#div p:first-child{
color:#E4393c;
}
:last-child 父元素中最后一個p元素
p:before
p:after 這兩個常被用來清除浮動