css與選擇器
阿新 • • 發佈：2018-12-02
：偽類 ：：偽元素
1、外鏈 css檔案
<head>
<meta charset="utf-8">
<title>首頁</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/fontello.css">
</head>
2、選擇器
2.1基本選擇器
{ID選擇器 #id（id唯一）
類選擇器 class .class（name可組合使用，應用於多個元素）
*選擇器–通用選擇器
元素選擇器 p{}直接選擇
}
2.2關係選擇器 {
1、後代選擇器 .classname p{} 選中classname裡面的p
2、子元素選擇器 .block >p{} 選中class=“block” 裡面的直接的子元素p 3、兄弟選擇器
p~div 會選中p之後的所有的div兄弟
p+div 只會選中緊跟p後面的一個兄弟元素}
2.3偽類選擇器
1、：link設定a元素在未被訪問前的CSS樣式
：visited設定a元素在其連結地址已被訪問過時的CSS樣式
：hover設定元素在其滑鼠懸停時的CSS樣式
：active設定元素在被使用者啟用(在滑鼠點選與釋放之間發生的事件)時 的CSS樣式。
2、結構偽類選擇器
.classname:first-child{} 第一個孩子
.classname:last-child{} 最後一個孩子
.classname:nth-child(even){} even是偶數
.classname:nth-child(2n+1){} 奇數
.classname:nth-child(4){} 第4個孩子
.classname:nth-last-child(5){} 倒著數第五個
這個classname是它自己 不是它的父元素
2.4偽元素選擇器
::first-letter 第一個字
::first-line 第一行
::before 內容之前插一個元素
::after 內容之後插一個元素