HTML和CSS - Xi-Yuer

CSS 基礎#

單行文字溢出#

.overflow-example {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文字溢出#

.multiline-overflow-example {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 指定要顯示的行數 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

修改捲軸樣式#

/* 寬度和高度 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 軌道 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 滑塊 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 滑塊懸停樣式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
/* 滑塊顏色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 滑道背景色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

標籤選擇器#

通過標籤名選擇元素
優點：可快速為同類型標籤統一設置樣式
缺點：不能涉及差異化樣式，只能選擇全部標籤

h1 {
  color: #ccc;
}

類選擇器#

通過類名選擇元素

.container {
  color: pink;
}

id 選擇器#

通過元素 id 屬性選擇元素

#md {
  font-weight: 600;
}

通配符選擇器#

選擇頁面所有元素
用於清除內外邊距

* {
  padding: 0;
  margin: 0;
}

相鄰選擇器#

選擇所有指定元素的相鄰後一個兄弟節點

<h1>h1-2</h1>
<p>p0 被選中</p>
<div class="container">
  <h1 class="good">h1</h1>
  <p>p1 被選中</p>
  <p>p2</p>
</div>

h1 + p {
  text-decoration: underline;
}

後代選擇器#

在所有後代節點中選

ul li {
  color: blue;
}

子選擇器#

只在親兒子中選

div > a {
  color: green;
}

並集選擇器#

h1,
h2,
h3 {
  text-align: center;
}

交集選擇器#

/* good類的p元素 */
p.good {
  color: yellow;
}

偽類選擇器#

根據元素狀態或所處 DOM 結構選擇元素

動態偽類選擇器#

按這個順序聲明
a:link 鏈接一開始的樣式
a:visited 鏈接訪問後的樣式
a:hover 光標經過鏈接的樣式
a:active 鏈接被按下時的樣式

:focus 用於選擇獲取焦點的表單元素，一般針對表單元素而言
input:focus
textarea:focus

結構偽類選擇器 (C3)#

E
E
E(n)
E
E
E(n)

<div>
  <p>1</p>
  <span>span</span>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

/* 啥都選不到 */
div > p:nth-child(2) {
  color: red;
}
/* 選到2號p標籤 */
div > p:nth-of-type(2) {
  color: blue;
}

屬性選擇器#

E[att]
E[att="val"]
E[att^="val"]
E[att$="val"]

偽元素選擇器#

偽元素選擇器利用 CSS 創建新標籤元素，而不需要 HTML 標籤，從而簡化 HTML 結構
before 和 after 創建了一個行內元素，在 DOM 樹中無法找到，故為偽元素
必須有 content 屬性

偽元素字體圖標#

p::before {
  content: '\e91e';
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
}

偽元素清除浮動#

1、額外標籤法（隔牆法）
在浮動元素後面添加一個塊級標籤（如div），並設置 clear: both
<div style=” clear:both” ></div>

2、父級元素添加overflow，將其屬性值設置為 hidden、 auto 或 scroll

3、父級添加after偽元素
.clearfix:after {
  content: ""; 必須要有content屬性
  display: block; 塊級元素
  height: 0; 不要看見該元素
  clear: both; 核心代碼清除浮動
  visibility: hidden; 不要看見該元素
}
.clearfix { /* IE6、 7 專有 */
  *zoom: 1;
}

4、父級元素添加雙偽元素
.clearfix:before,.clearfix:after {
  content:"";
  display:table; 轉換為塊級元素並一行顯示
} .
clearfix:after {
  clear:both;
} .
clearfix {
  *zoom:1;
}