本文章主要整理了html入門的基礎知識點

圖片 <img>

<img src="圖片的路徑" alt="圖片未加載出來時的提示" width="設置圖片的寬度" height=“設置圖片的高度” title="鼠標放置到圖片上時的提示文本">
img { border-radiuds: 3px; opacity=0.4 } ==> <"設置圖片的圓角,透明度">

• background-repeat: repeat(平鋪) | no-repeat(不平鋪) | inherit(繼承) ; ==> 圖片是否平鋪
• background-size: 數值 | 百分比 | cover | contain; ==> 圖片的尺寸
• background-attachment: fixed; ==> 圖片是否隨頁面滾動
• background-position: center; ==> 圖片在父容器中的位置(不改變圖片的大小)
• background-origin: padding-box(內邊距) | border-box(邊框) | content-box(內容); ==> 圖片相對于什么內容來定位
• background-clip: border-box(邊框) | padding-box(內邊距) | content-box(內容); | text(背景只為文字有效) ==> 圖片修剪到什么位置

mix-blend-mode: ==> 描述了元素的內容應該與直系父元素的背景如何混合

• multiply ==> 正片疊底
• screen ==> 濾色
• overlay ==> 疊加
• darken ==> 變暗
• lighten ==> 變亮
• color-dodge ==> 顏色減淡
• color-burn ==> 顏色加深
• hard-light ==> 強光
• soft-light ==> 柔光
• difference ==> 差值
• exclusion ==> 排除
• hue ==> 色相
• saturation ==> 飽和度
• color ==> 顏色
• luminosity ==> 亮度
• initial ==> 初始
• inherit ==> /繼承
• unset ==> 復原

-webkit-filter: 圖片濾鏡,可以使用多個濾鏡,之間使用空格隔開

• blur(11px) ==> 高斯模糊
• brightness(120%) ==> 圖片高亮
• contrast(200%) ==> 對比度
• grayscale(50%) ==> 灰度圖片
• hue-rotate(90deg) ==> 色相旋轉
• invert(100%) ==> 反轉輸入圖片 負片
• opacity(30%) ==> 透明度
• saturate(800%) ==> 飽和度
• sepia(100%) ==> 轉換為深褐色
• drop-shadow(8px 8px 10px red) ==> 設置陰影效果

鏈接 <a></a>

<a href="鏈接網址" target＝“_blank” >鏈接名稱</a> ==> 在新建的窗口中打開鏈接
<a href = “javascript:添加js代碼;”>點擊</a>
# ==> 本網頁刷新 a標簽不能嵌套a標簽

target屬性:

• _blank ==> 在新窗口中打開被鏈接文檔。
• _self ==> 默認。在相同的框架中打開被鏈接文檔。
• _parent ==> 在父框架集中打開被鏈接文檔。
• _top ==> 在整個窗口中打開被鏈接文檔
• framename ==> 在指定的框架中打開被鏈接文檔

錨點鏈接 ==> 也可以使用id
<a name="名稱（aaa）| id="bbb">鏈接終點</a> ==> 定義錨點跳轉的最終位置
<a href="#名稱（aaa | bbb）">鏈接起點</a> ==> 定義點擊錨點,點擊跳轉到錨點

一些常用的設置:

• text-decoration: none ==> 去掉鏈接的下劃線
• a:link {} ==> 原本的顏色 沒用
• a:visited {} ==> 訪問過后的變化 沒用
• a:hover {color: #888} ==> 懸浮的時候字體顏色變化
• a:active {color: #999} ==> 點擊時候的變化
• 點擊鏈接強制執行一段代碼

表格 <table></table>

<tr> </tr> 行
<th> </th> 表頭
<td> </td> 列
屬性:

• <summary> </summary> ==> 表格摘要
• align="center" ==> 設置文本的對齊方式
• bgcolor="red" ==> 單元格的背景顏色
• layout="automtic" ==> 列的寬度由單元格內容決定
• layout="fixed" ==> 列的寬度由表格寬度和列寬決定
• rowspan="" ==> 合并行
• colspan="" ==> 合并列
• cellpadding="0" ==> 單元格內容與邊界的距離
• cellspacing="0" ==> 單元格與單元格之間的距離
• <table cellspacing="0" cellpadding="0"> </table> ==> 設置單元格之間的距離為0, 這樣設置之后邊框會重疊

樣式:

• border-collapse: collapse ==> 合并邊框只顯示一個
• border-spacing: 20px 120px ==> 設置單元格之間的距離
• empty-cells:hide ==> 隱藏空白單元格的邊框和背景

表單 <form></form>

<fieldset> </fieldset> ==> 寫在表單的最外面 給包含的內容加上一個邊框
<legend>123</legend> ==> 在邊框上加字
<input type="" name="firstname" value=""> ==> 根據type的設置來改變表單, name用來區別組, value表示表單的值
<textarea rows="10" cols="30"> </textarea> ==> 文本域
<details> <summary open>顯示</summary> 完整內容 </details> ==> 當點擊summary中的內容的時候顯示下面的完整內容,open屬性的時候默認是打開

• text ==> 文本輸入框
• password ==> 密碼輸入框
• button ==> 普通按鈕 value表示按鈕上的文字
• submiit ==> 提交按鈕 value表示按鈕上的文字
• reset ==> 重置按鈕 value表示按鈕上的文字
• radio ==> 單選框, 一組中的單選框name都相等
• checkbox ==> 多選框
• color ==> 顏色選擇框, value表示顏色的值
• month ==> 月份選擇器
• date ==> 日期選擇器
• number: <input type="number" name="quantity" min="1" max="5"> ==> 選取一個范圍內的數字

文本框的一些屬性

• placeholder="" ==> 文本提示
• autocapitalize="off" ==> ios字母輸入首字母大寫
• autofocus ==> 元素添加這個屬性后, 頁面載入的時候自動獲取焦點
• required ==> 必填字段
• disabled ==> 禁用字段
• max min ==> 規定輸入的最大和最小值
• maxlength ==> 規定輸入最多的字符數
• input:focus { background-color:yellow; border-color:red;} ==> 輸入的時候可以改變input的樣式
• caret-color: red; ==> 修改輸入框的光標顏色
• -webkit-appearance: none; ==> 框框有內陰影

修改提示信息的樣式

• input::-webkit-input-placeholder { color: #c2c6ce; } ==> webkit內核的瀏覽器
• input:-moz-placeholder { color: #c2c6ce; } ==> Firefox版本4-18
• input::-moz-placeholder { color: #c2c6ce; } ==> Firefox版本19+
• input:-ms-input-placeholder { color: #c2c6ce; } ==> IE瀏覽器

下拉列表 <select></select>

<option value="one">one</option> ==> 每一項
<optgroup label="math"> <option> </option> </optgroup> ==> 每一組
Selected ==> 寫在每一項中, 表示默認選中這一項, 所有的都是默認選中第一項
<input list="browsers"> | <datalist id="browsers"> <option> </option> </datalist> ==> 表示上面的輸入框鏈接到下面ID相同的下來菜單中, 自帶模糊篩選
select option { direction: rtl; } ==> 下拉列表右對齊

列表 <ul></ul>

無序列表 <ul type=""> <li> </li> </ul>

• disc 圓圈
• circle 空心圓
• square 方框

有序列表 <ol type=""> <li> </li> </ol>
type的值可以是 1 a A i I
reversed ==> 倒序
start="" ==> 前面的序號從第幾位開始
list-style: ==> 三個屬性的簡寫

• list-style-type: none ==> 不使用標點
• list-style-position: inside outside ==> 標記點的位置
• list-style-image: url(); ==> 使用圖片作為標記點

邊框 border & outline

border
border: 1px solid #eee ==> 簡寫屬性: 寬度 樣式 顏色
當三個屬性分開寫的時候, 每個屬性可以有四個值, 兩個和一個

• border-width
• border-style: dashed 虛線 solid 實線 dotted 點虛線 double 雙層線
• border-color

border-radius: 2px; ==> 設置圓角為像素, 當是50%的時候就是圓, 可以設置四個值對應四個角
border-bottom-right-radius: 2em ==> 設置右下角的圓角, 可以單獨設置其中的一個圓角
border-radius: 100px 100px 0 0; ==> 半圓, 設置大小為框高的兩倍
border-radius: 100px 0 0 ==> 扇形, 設置其中一個角的大小為寬高相等
border-radius: 100px 0 ==> 葉子, 設置對角大小和寬高相等
設置一個盒子的寬高為0, border值為一個較大的數值, 每個邊框設置不同的顏色, 會成為四個三角形, 可以設置其他三個的顏色為透明, 就會是三角形了, 同時設置圓角會好看

outline
outline: 1px solid #eee ==> 簡寫屬性: 寬度 樣式 顏色
他和border的區別就是: border會占用實際的位置, 而outline不會.

陰影 box-shadow

box-shadow: 0 2px 12px #eee inser ==> 設置盒子的陰影: 右偏移距離,左偏移距離,模糊度. inset是內陰影
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28)
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5) ==> 好看的盒子投影
text-shadow: 0 1px 2px #999; ==> 字體投影

內容修剪 overflow

overflow:visible ==> 默認值。內容不會被修剪，會呈現在元素框之外
overflow:scroll ==> 旁邊顯示滾動條
overflow:hidden ==> 只顯示盒子里面的內容不會溢出
overflow:auto; ==> 只顯垂直的滾動條, 也可以解決子元素的溢出

滾動條 scrollbar

-webkit-overflow-scrolling: touch; ==> 可以在手機端滾動的時候變得平滑
::-webkit-scrollbar {} ==> 設置滾動條整體的寬度, 高度, 背景. 直接設置就行
::-webkit-scrollbar-track {} ==> 設置滾動條軌道圓角，背景，內陰影
::-webkit-scrollbar-thumb {} ==> 定義滑塊的樣式圓角，漸變
::-webkit-scrollbar-button {} ==> 定義兩端的按鈕
#box::-webkit-scrollbar { display: none; } ==> 隱藏滾動條

元素對齊 vertical-align

使元素和行中的元素堆齊

• baseline ==> 默認, 對齊在基線上
• super ==> 垂直對齊文本的上標??
• sub ==> 垂直對齊文本的下標
• top ==> 把元素的頂端與行中最高元素的頂端對齊
• text-top ==> 把元素的頂端與父元素字體的頂端對齊
• text-top ==> 把元素的頂端與父元素字體的頂端對齊
• bottom ==> 把元素的頂端與行中最低元素的頂端對齊
• text-bottom ==> 把元素的頂端與父元素字體的底端對齊
• middle ==> 把元素放置在父元素的中部

定位 position

• relative ==> 相對定位, 相對于自身進行定位
• absolute ==> 絕對定位, 相對于設置了定位的父元素進行定位
• fixed ==> 固定定位, 相對于瀏覽器進行定位, 不隨頁面的滾動而發生變化
• sticky ==> 粘性定位, 當滾動到一定位置的時候就會變成固定定位

display

• none ==> 此元素不會顯示
• block ==> 此元素變為塊級元素
• inline ==> 此元素變為行內元素
• inline-block ==> 變為行內塊級元素
• list-iten ==> 此元素變為列表顯示
• run-ni ==> 根據上下文作為塊級或者行內顯示
• -webkit-flex -webkit-lihine-flex ==> 此元素變為彈性布局
• inline-grid ==> 此元素變為網格布局
• table table-cell ==> 表格

元素隱藏

display: none ==> 元素會完全隱藏, 不會占用空間
visibility: hidden ==> 元素會不顯示, 但是仍會占用之前的空間

背景漸變

線性漸變 linear
background: repeating-linear-gradient(to right, red 50%, yellow 50%) ==> 先指定漸變的方向, 然后添加顏色, 之間用逗號隔開, 可以添加多個顏色, 也可以在每個顏色后面添加占比, repeating的意思是重復漸變

徑向漸變 ==>> 垃圾TMD
background: radial-gradient(形狀, 大小, 開始顏色, 終止顏色)

• ellipse(橢圓, 默認) circle(圓形)
• closest-side：最近邊 farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角

字體

• font-style: italic | oblique ; ==> 字體的樣式, 斜體 | 傾斜
• font-family: ""; ==> 字體
• font-weght: 500 ==> 字體的粗細
• font-size: 12px; ==> 字體大小
• color: #5a6a7a; ==> 字體顏色
• text-indent: 2em ==> 首行鎖進
• line-height: 12px; ==> 行間距, 和父元素高度一樣時垂直居中
• text-align: left | center | right ==> 文本水平對齊方式
• letter-spacing: 12px; ==> 字母間的距離、
• word-spacing: 12px; ==> 單詞間的距離

white-space ==> 文本的換行操作

• normal; ==> 文本會換行, 連續空格合并, 換行會保留
• nowrap; ==> 文本禁止換行, 連續空格和換行會合并
• pre; ==> 文本禁止換行, 連續空格和換行會保留
• pre-wrap; ==> 文本會換行, 連續空格和換行會保留
• pre-line; ==> 文本會換行, 連續空格合并, 換行會保留

font-variant ==> 設置文本的大小寫

• font-variant:small-caps; ==> 字體變成小型的大寫字體
• capitalize ==> 首字母大寫
• uppercase ==> 全部大寫
• lowercase ==> 全部小寫

text-decoration ==> 文本的線條

• none ==> 不限時下劃線
• overline ==> 線條在上滿
• line-through ==> 線條在中間
• underline ==> 線條在下面

文本格式化

<b> 定義粗體文本</b>
<em>定義著重字</em>
<i>定義斜體字</i>
<small>定義小號字</samll>
<strong>定義加重語氣</strong>
<sub>定義下標</sub>
<sup>定義上標</sup>
<del>啊</del>刪除文字效果
<ins>啊</ins>下劃線文字效果
<pre>文本內容</pre> ——保留文字的空格和換行

cursor ==> 文本光標發生變化

• auto ==> 文本
• crosshair ==> 十字架
• default ==> 箭頭
• pointer ==> 小手

動畫

在網頁中橫軸的右邊為正, 垂直軸的下為正, 360deg=360度

transform: ==> 變化

translate () ==> 兩個參數, 從當前的位置進行移動, 負數的方向相反

• translate (50px, 50px) ==> 右下方移動
• translateX () ==> 橫向向右移動, 負數相反
• translateY () ==> 垂直向下移動, 負數相反

rotate () ==> 一個參數, 給定度數順時針旋轉, 負數為逆時針

• rotate (90deg) ==> 順時針旋轉90度
• rotateX () ==> 圍繞X軸旋轉, 向上翻轉, 負數相反
• rotateY () ==> 圍繞Y軸旋轉, 向右翻轉, 負數相反

scale() ==> 兩個參數, 相對于之前元素的寬度和高度增大(正數)或者縮小(負數)

• scale(-1, 1) ==> 水平翻轉
• scale()1, -1 ==> 垂直翻轉

skew ==> 兩個參數, X軸和Y軸的傾斜度, 第二個參數為空默認為0, 負數表示方向相反

• skewX () ==> 向X軸傾斜
• skewY () ==> 向Y軸傾斜

transition: all 0.5s linear 0; ==> 動畫的過渡, 要變化的元素 變化時間, 運動速度方式, 幾米后開始

transition-property:; ==> 要過渡的屬性

transition-duration:; ==> 過渡的時間

transition-timing-function:; ==> 過渡的時間曲線

• ease ==> 默認, 慢快慢
• linear ==> 相同的速度
• ease-in ==> 慢速開始
• ease-out ==> 慢速結束
• ease-in-out ==> 慢速開始和結束

transition-delay:; ==> 過渡幾秒后開始

@keyframes name {} ==> 創建一個動畫

from{color: red} to{color: yellow} ==> 創建一個顏色動畫
0%{} 25%{} 50%{} 100%{} ==> 分成階段來創建, 可以加入變化transform

animation ==> 動畫運轉

animation: name 1s linear 2s infinite alternate running forwards; ==> 動畫的簡寫
時間, 時長, 運動快慢, 幾秒開始, 播放次數, 反向循環, 開始暫停, 最后一幀

• name, 要使用動畫的名字
• animation-duration: time; ==> 規定動畫的時長
• animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out; ==> 規定時間曲線
• animation-delay: time; ==> 動畫幾秒后開始播放, 負值的時候直接從一秒后的動畫開始播放
• animation-iteration-count: number | infinite; ==> 播放的次數, 幾次或者無限次
• animation-direction: alternate; ==> 輪流反向播放
• animation-play-state: running | paused; ==> 動畫播放和暫停
• animation-fill-mode: none(沒變化) | forwards(最后) | backwards(開始) | both; ==> 動畫播放之后保留的狀態

彈性盒子

任何一個容器都可以指定為Flex布局{display:-webkit-flex} 行內元素也可以指定為Flex布局 {display:lihine-flex}設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。只要給一個容器設置了彈性屬性，其中的子元素就算是彈性子元素
容器橫向的為主軸：main start -- main axis -- main end
容器垂直方向為交叉軸：cross start -- cross axis -- cross end
項目占據的主軸空間為：main size; 占據的交叉軸空間為：cross size;

容器的屬性

flex-direction ==> 決定主軸的方向，也就是內部元素的排列方式

• row ==> 水平從左到右 (默認)
• row-reverse ==> 水平從右到左
• column ==> 垂直從上往下
• column-reverse ==> 垂直從下往上

flex-wrap ==> 當內部元素在主軸上排列不下的時候是否換行和換行方式

• nowarp 自動縮小項目，不換行 (默認)
• wrap 換行，第一行在上方
• warp-reverse 換行，第一行在下方
• flex-flow:row wrap flex-direction和flex-warp的簡寫

justify-content ==> 決定內部元素在主軸上的對齊方式

• flex-start 左對齊 (默認)
• flex-end 右對齊
• center 居中對齊
• space-between 兩端對齊
• space-around 均勻分布

align-items ==> 決定項目在交叉軸上如何對齊

• flex-start 在交叉軸的起點對齊
• flex-end 在交叉軸的終點對齊
• center 在交叉軸的中點對齊
• baseline 在項目的第一行文字的基線對齊
• strech 如果項目沒有設置高度將沾滿整個容器的高度 (默認)

align-content ==> 定義多根軸線(主軸)的對齊方式，如果只有一條則不起作用

• flex-start 與交叉軸的起點對齊
• flex-end 與交叉軸的重點對齊
• center 與交叉軸的中點對齊
• space-between 與交叉軸的兩端對齊 軸線之間均勻分布
• space-around 每根軸線兩側的間隔都相等
• stretch 軸線占滿整個交叉軸 (默認)

項目的屬性

order ==> 定義項目的排列順序，數值越小，排列越靠前 默認為0

flex-grow ==> 定義項目的放大比例 默認為0 存在剩余空間也不放大, 如果所有項目的屬性都為1，則他們將等分剩余的空間, 如果一個項目的屬性為2，其他的項目為1，前者占據空間比其他多一倍

flex-shrink ==> 定義項目的縮小比例 默認為1 空間不足時項目縮小, 如果所有的項目屬性為1，空間不足時，等比例縮小, 如果一個項目屬性為0，其他項目都為1，空間不足時，前者不縮小，其余的縮小, 負數值無效

flex-basis ==> 定義分配多余空間之前，項目占據的主軸空間, 可以設置大小，空間將固定.它的默認值為auto，即項目的本來大小。
flex flex-grow,flex-shrink和flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)

align-self ==> 允許單個項目與其他項目有不一樣的對齊方式

• 默認為auto 繼承父元素的align-items屬性，沒有父元素等同于 stretch
• flex-start 在交叉軸的起點對齊
• flex-end 在交叉軸的終點對齊
• center 在交叉軸的中點對齊
• baseline 在項目的第一行文字的基線對齊
• strech 如果項目沒有設置高度將沾滿整個容器的高度

網格盒子

任何一個元素都可以設置成網格盒子，display: grid; 也可以設置成行內盒子 display: inline-grid注意，設為網格布局以后，容器的float、display: inline-block、display: table-cell、vertical-align和column等設置都將失效。

容器屬性：
grid-template-columns; 10px 10px 10px 10px; ----設置容器的列寬
grid-template-rows; 10px 10px ; ---- 設置容器的行寬
除了使用絕對單位，還可以使用百分比。當網格很多的時候，可以使用repeat( )方法來改寫
grid-template-columns: repeat( 2，100px ); 意思就是重復兩次100px
grid-template-columns: repeat( 2 , 10px 120px )； 意思是可以重復一組
grid-template-columns: repeat( auto-fill, 100px )； —— 設置列寬度之后，重復幾個沒有說明，會根據頁面的寬度自動填充
grid-template-columns:1fr 1fr ；會平分寬度 可以和絕對長度一起使用
grid-template-columns:1fr 1fr minimal( 100px 200px )；第三列的寬度最小為100px，當空間足夠時可以變大，但是最大為200px；
grid-template-columns:100px auto 200px ；auto會根據瀏覽器的自己決定寬度
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; 指定網格線的名稱，一個網格線可以有多個名稱[a b]
grid-row-gap: 20px; ---設置行與行之間的間隔
grid-column-gap: 20px; —設置列與列之間的間隔
grid-gap : 行間隔 列間隔； 如果省略了第二個值，則認為是間隔一樣
最新的標準已經去掉了前綴grid
grid-template-areas: ‘ a b c ‘; 給區域命名
grid-auto-flow: ; row--先行后列 column--先列后行
網格子元素的默認排列順序是先行后列；
row dense; column dense;
justify-items： 設置單元格內容的水平位置
align-items: 設置單元格內容的垂直位置
place-items: 兩個屬性的縮寫 ·
start：對齊單元格的起始邊緣
end：對齊單元格的結束邊緣
center：單元格內部劇中
stretch：拉伸，沾滿整個寬度
justify-content： 設置單元格內容的水平位置
align-content: 設置單元格內容的垂直位置
place-content: 兩個屬性的縮寫 ·省略第二個值之后會默認等于第一個值
start：對齊單元格的起始邊緣
end：對齊單元格的結束邊緣
center：單元格內部劇中
stretch：拉伸，沾滿整個寬度
space-around： 每個項目兩邊的間隔相等
space-between；項目與項目的間隔相等，與容器邊框沒有間隔
space-evenly： 項目與項目，項目與容器邊框的間隔相等
grid-auto-columns 和 grid-auto-rows 用來自動創建多余網格的列寬和行高
grid-template屬性是grid-template-columns、grid-template-rows和grid-template-areas這三個屬性的合并簡寫形式。
grid屬性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性的合并簡寫形式。
項目屬性
grid-column-start屬性：左邊框所在的垂直網格線
grid-column-end屬性：右邊框所在的垂直網格線
grid-row-start屬性：上邊框所在的水平網格線
grid-row-end屬性：下邊框所在的水平網格線
grid-column屬性是grid-column-start和grid-column-end的合并簡寫形式，grid-row屬性是grid-row-start屬性和grid-row-end的合并簡寫形式。
grid-area屬性指定項目放在哪一個區域。
justify-self屬性設置單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用于單個項目。
align-self屬性設置單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用于單個項目。
start：對齊單元格的起始邊緣。
end：對齊單元格的結束邊緣。
center：單元格內部居中。
stretch：拉伸，占滿單元格的整個寬度（默認值）。
place-self屬性是align-self屬性和justify-self屬性的合并簡寫形式。

選擇器

* ==> 通配符
元素選擇器
類選擇器 .class
ID選擇器 #id
偽類選擇器

• :link ==> 未訪問的樣式, L-V-H-A
• :visited ==> 訪問后的樣式
• :hover ==> 鼠標懸浮的樣式
• :active ==> 按下和松開時的樣式
• :focus ==> 獲取焦點的樣式
• ::before{content:"";} ::after{content:"";} ==> 每個元素都有
• :first-child :last-child ==> 一組中第一個和最后一個元素
• :nth-child(an+b) ==> 一組中的這個元素進行排序, an為每次相加的數, b為初使的位置
• :nth-last-child(an+b) ==> 從后面開始, an為每次相加的數, b為初使的位置, 為具體的數字的時候就是哪個
• :nth-child(even) nth-child(odd) ==> 奇數, 偶數選擇器
• :nth-child(-n+3) ==> 匹配前三個
• :nth-last-child(-n+3) ==> 匹配最后三個
• :enabled :disabled ==> 被激活, 被禁用的元素

關系選擇器

• div.name ==> 為name的div
• .a,.b,.c ==> 三個都選
• div p ==> div中的p
• div > p ==> div中的p
• div + p ==> 選取和這個div同為一個父元素的接下來的元素
• div ~ p ==> div的后續兄弟!

434_1.png
23