选择器与常用属性
一、**css2的選擇符：
-----------------------------------------------------------------
1. html選擇符（標簽選擇器）
就是把html標簽作為選擇符使用
如 p{....} 網頁中所有p標簽采用此樣式
h2{....} 網頁中所有h2標簽采用此樣式
2. class類選擇符 (使用點.將自定義名（類名）來定義的選擇符)
定義： .類名{樣式....} 匿名類
其他選擇符名.類名{樣式....}
使用：<html標簽 class="類名">...</html標簽>
.mc{color:blue;} /* 凡是class屬性值為mc的都采用此樣式 */
p.ps{color:green;} /*只有p標簽中class屬性值為ps的才采用此樣式*/
注意：類選擇符可以在網頁中重復使用
3. Id選擇符
定義： #id名{樣式.....}
使用：<html標簽 id="id名">...</html標簽>
注意：id選擇符只在網頁中使用一次.
選擇符的優先級：從大到小 [ID選擇符]->[class選擇符]->[html選擇符]->[html屬性]
4. 關聯選擇符（包含選擇符）
格式： 選擇符1 選擇符2 選擇符3 ...{樣式....}
例如： table a{....} /*table標簽里的a標簽才采用此樣式*/
h1 p{color:red} /*只有h1標簽中的p標簽才采用此樣式*/
5. 組合選擇符（選擇符組）
格式： 選擇符1,選擇符2,選擇符3 ...{樣式....}
h3,h4,h5{color:green;} /*h3、h4和h5都采用此樣式*/
6. 偽類選(偽元素)擇符：
格式： 標簽名:偽類名{樣式....}
a:link {color: #FF0000; text-decoration: none} /* 未訪問的鏈接 */
a:visited {color: #00FF00; text-decoration: none} /* 已訪問的鏈接 */
*a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標在鏈接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */
二、 CSS3中的選擇器
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
1. 關系選擇器：
div>p 選擇所有作為div元素的子元素p
div+p 選擇緊貼在div元素之后p元素
div~p 選擇div元素后面的所有兄弟元素p
2. 屬性選擇器：
[attribute]選擇具有attribute屬性的元素。
[attribute=value]選擇具有attribute屬性且屬性值等于value的元素。
[attribute~=value]選擇具有attribute屬性且屬性值為一用空格分隔的字詞列表，其中一個等于value的元素。
[attribute|=value]選擇具有att屬性且屬性值為以val開頭并用連接符"-"分隔的字符串的E元素。
[attibute^=value]匹配具有attribute屬性、且值以valule開頭的E元素
[attribute$=value]匹配具有attribute屬性、且值以value結尾的E元素
[attribute*=value]匹配具有attribute屬性、且值中含有value的E元素
3. 結構性偽類選擇器：
::first-letter設置對象內的第一個字符的樣式。
::first-line設置對象內的第一行的樣式。
:before設置在對象前（依據對象樹的邏輯結構）發生的內容。
:after設置在對象后（依據對象樹的邏輯結構）發生的內容。
:lang(language)匹配使用特殊語言的E元素。
:element1~element2:
:first-of-type匹配同類型中的第一個同級兄弟元素
:last-of-type匹配同類型中的最后一個同級兄弟元素
:only-of-type匹配同類型中的唯一的一個同級兄弟元素
:only-child匹配父元素僅有的一個子元素
:nth-child(n)匹配父元素的第n個子元素
:nth-last-child(n)匹配同類型中的倒數第n個同級兄弟元素
:last-child()匹配父元素的最后一個子元素
:root匹配元素在文檔的根元素。在HTML中，根元素永遠是HTML
:empty匹配沒有任何子元素（包括text節點）的元素
4. *狀態偽類選擇器
:link 設置超鏈接a在未被訪問前的樣式。
:visited 設置超鏈接a在其鏈接地址已被訪問過時的樣式
:active 設置元素在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式
*:hover 設置元素在其鼠標懸停時的樣式
*:focus 設置元素在其獲取焦點時的樣式
:target 匹配相關URL指向的E元素
:enabled 匹配用戶界面上處于可用狀態的元素
:disabled 匹配用戶界面上處于禁用狀態的元素
:checked 匹配用戶界面上處于選中狀態的元素
:not(selector)匹配不含有selector選擇符的元素
::selection 設置對象被選擇時的樣式
5. 其他偽類選擇器
E:not(s) ： {attribute}
匹配所有不匹配簡單選擇符s的元素E
p:not(.bg) {background-color:#00FF00;}
======================================================================================
三、CSS中常用的屬性：
---------------------------------------------------------------------------------------
1. color顏色屬性：
a. HSL顏色: 通過對色調(H)、飽和度(S)、亮度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色.
background-color: hsl(240,100%,50%);color:white；
b. HSLA顏色: 色調(H)、飽和度(S)、亮度(L)、透明度(A)；
background-color: hsla(0,100%,50%,0.2);
*c. RGB顏色: 紅(R)、綠(G)、藍(B)三個顏色通道的變化
background-color: rgb(200,100,0);
d. RGBA顏色: 紅(R)、綠(G)、藍(B)、透明度(A)
background-color: rgba(0,0,0,0.5);
*e. 圖片透明度的設置 img{ opacity:0.25;}
2. 字體屬性： font
font 斜體，小型的大寫字母，加粗，大小，字體樣式
font-style： normal正常；italic斜體； oblique傾斜的字體
font-variant: small-caps 小型的大寫字母字體
*font-weight： 字體加粗 ：bold
*font-size: 字體大小：20px，60%基于父對象的百分比取值
*font-family： 字體：宋體，Arial
font-stretch: [了解]文字的拉伸是相對于瀏覽器顯示的字體的正常寬度（大部分瀏覽器不支持）。
3. 文本屬性：
text-indent: 首行縮進：text-indent:30px;
text-overflow： 文本的溢出是否使用省略標記（...）。clip|ellipsis（顯示省略標記）
*text-align: 文本的位置：left center right
text-transform：對象中的文本的大小寫：capitalize(首字母)|uppercase大寫|lowercase小寫
*text-decoration: 字體畫線：none無、underline下畫線，line-through貫穿線
text-decoration-line：[了解]文本裝飾線條的位置（瀏覽器不兼容）
*text-shadow: 文本的文字是否有陰影及模糊效果
vertical-align: 文本的垂直對齊方式
direction：文字流方向。ltr | rtl
white-space:nowrap; /* 強制在同一行內顯示所有文本*/
*letter-spacing: 文字或字母的間距
word-spacing：單詞間距
*line-height：行高
*color： 字體顏色
*4. 邊框：
border:寬度 樣式 顏色;
border-color;
border-style; 邊框樣式：solid實現，dotted點狀線，dashed虛線
border-width:
border-left-color;
border-left-style;
border-left-width:
...
CSS3的樣式
border-radius：圓角處理
box-shadow: 設置或檢索對象陰影
5. 背景屬性：background
*background-color: 背景顏色
*background-image: 背景圖片
*background-repeat：是否重復，如何重復?(平鋪)
*background-position：定位
background-attachment： 是否固定背景，
scroll:默認值。背景圖像是隨對象內容滾動
fixed:背景圖像固定
css3的屬性
*background-size: 背景大小，如 background-size:100px 140px;
多層背景：
background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;
6. *內補白（內補丁）
padding： 檢索或設置對象四邊的內部邊距,如padding:10px; padding:5px 10px;
padding-top： 檢索或設置對象頂邊的內部邊距
padding-right： 檢索或設置對象右邊的內部邊距
padding-bottom：檢索或設置對象下邊的內部邊距
padding-left： 檢索或設置對象左邊的內部邊距
7. *外補白（外補丁）
margin： 檢索或設置對象四邊的外延邊距,如 margin:10px; margin:5px auto;
margin-top： 檢索或設置對象頂邊的外延邊距
margin-right： 檢索或設置對象右邊的外延邊距
margin-bottom： 檢索或設置對象下邊的外延邊距
margin-left： 檢索或設置對象左邊的外延邊距
8. Position定位
*position: 定位方式：absolute(絕對定位)、fixed(固定)（relative定位參考，可對內部相對absolute定位）
*z-index: 層疊順序，值越大越在上方。
*top: 檢索或設置對象與其最近一個定位的父對象頂部相關的位置
right: 檢索或設置對象與其最近一個定位的父對象右邊相關的位置
bottom: 檢索或設置對象與其最近一個定位的父對象下邊相關的位置
*left: 檢索或設置對象與其最近一個定位的父對象左邊相關的位置
9. Layout布局
*display： 是否及如何顯示：none隱藏，block塊狀顯示...
*float: 指出了對象是否及如何浮動:值none | left | right
*clear： 清除浮動：none | left | right | both兩側
visibility：設置或檢索是否顯示對象。visible|hidden|collapse。
與display屬性不同，此屬性為隱藏的對象保留其占據的物理空間
clip: 檢索或設置對象的可視區域。區域外的部分是透明的。 rect(上-右-下-左)
如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.
*overflow: 超出隱藏：hidden，visible：不剪切內容
overflow-x：內容超過其指定寬度時如何管理內容: visible | hidden | scroll | auto
overflow-y：內容超過其指定高度時如何管理內容
10.Flexible Box 彈性盒子(了解見手冊)
box-orient: 設置或檢索彈性盒模型對象的子元素的排列方式。horizontal(水平)|vertical(縱向)
box-pack 設置或檢索彈性盒模型對象的子元素的對齊方式。
box-align 設置或檢索彈性盒模型對象的子元素的對齊方式。
box-flex 設置或檢索彈性盒模型對象的子元素如何分配其剩余空間。
box-flex-group 設置或檢索彈性盒模型對象的子元素的所屬組。
box-ordinal-group 設置或檢索彈性盒模型對象的子元素的顯示順序。
box-direction 設置或檢索彈性盒模型對象的子元素的排列順序是否反轉。
box-lines 設置或檢索彈性盒模型對象的子元素是否可以換行顯示。
11. 用戶界面 User Interface
*cursor 鼠標指針采用何種系統預定義的光標形狀。pointer小手，url自定義
zoom 設置或檢索對象的縮放比例： normal|5倍|200%百分比
box-sizing 設置或檢索對象的盒模型組成模式。content-box | border-box
content-box： padding和border不被包含在定義的width和height之內。
border-box： padding和border被包含在定義的width和height之內。
resize 設置或檢索對象的區域是否允許用戶縮放，調節元素尺寸大小。
none： 不允許用戶調整元素大小。
both： 用戶可以調節元素的寬度和高度。
horizontal： 用戶可以調節元素的寬度
vertical： 用戶可以調節元素的高度。
outline 復合屬性：設置或檢索對象外的線條輪廓
outline-width 設置或檢索對象外的線條輪廓的寬度
outline-style 設置或檢索對象外的線條輪廓的樣式
outline-color 設置或檢索對象外的線條輪廓的顏色
outline-offset 設置或檢索對象外的線條輪廓偏移位置的數值
nav-index 設置或檢索對象的導航順序。
nav-up 設置或檢索對象的導航方向。
nav-right 設置或檢索對象的導航方向。
12. 多欄 Multi-column
columns 設置或檢索對象的列數和每列的寬度
column-width 設置或檢索對象每列的寬度
column-count 設置或檢索對象的列數
column-gap 設置或檢索對象的列與列之間的間隙
column-rule 設置或檢索對象的列與列之間的邊框
column-rule-width 設置或檢索對象的列與列之間的邊框厚度
column-rule-style 設置或檢索對象的列與列之間的邊框樣式
column-rule-color 對象的列與列之間的邊框顏色
column-span 象元素是否橫跨所有列
column-fill 對象所有列的高度是否統一
column-break-before 對象之前是否斷行
column-break-after 對象之后是否斷行
column-break-inside 對象內部是否斷行
13. 表格相關屬性：
table-layout 設置或檢索表格的布局算法
border-collapse 設置或檢索表格的行和單元格的邊是合并在一起還是按照標準的HTML樣式分開 separate | collapse
border-spacing 設置或檢索當表格邊框獨立時，行和單元格的邊框在橫向和縱向上的間距
caption-side 設置或檢索表格的caption對象是在表格的那一邊 top | right | bottom | left
empty-cell 設置或檢索當表格的單元格無內容時，是否顯示該單元格的邊框 hide | show
14. 過渡 Transition:
transition 檢索或設置對象變換時的過渡效果
transition-property 檢索或設置對象中的參與過渡的屬性
transition-duration 檢索或設置對象過渡的持續時間
transition-timing-function 檢索或設置對象中過渡的類型
transition-delay 檢索或設置對象延遲過渡的時間
15. 動畫 Animation
animation 檢索或設置對象所應用的動畫特效
animation-name 檢索或設置對象所應用的動畫名稱
animation-duration 檢索或設置對象動畫的持續時間
animation-timing-function 檢索或設置對象動畫的過渡類型
animation-delay 檢索或設置對象動畫延遲的時間
animation-iteration-count 檢索或設置對象動畫的循環次數
animation-direction 檢索或設置對象動畫在循環中是否反向運動
animation-play-state 檢索或設置對象動畫的狀態
animation-fill-mode 檢索或設置對象動畫時間之外的狀態
16. 2D變換 2D Transform:
transform 檢索或設置對象的變換
transform-origin 檢索或設置對象中的變換所參照的原點
17. Media Queries Properties媒體查詢
width 定義輸出設備中的頁面可見區域寬度
height 定義輸出設備中的頁面可見區域高度
device-width 定義輸出設備的屏幕可見寬度
device-height 定義輸出設備的屏幕可見高度
orientation 定義'height'是否大于或等于'width'。值portrait代表是，landscape代表否
aspect-ratio 定義'width'與'height'的比率
device-aspect-ratio 定義'device-width'與'device-height'的比率。如常見的顯示器比率：4/3, 16/9, 16/10
device-aspect-ratio 定義'device-width'與'device-height'的比率。如常見的顯示器比率：4/3, 16/9, 16/10
color 定義每一組輸出設備的彩色原件個數。如果不是彩色設備，則值等于0
color-index 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等于0
monochrome 定義在一個單色框架緩沖區中每像素包含的單色原件個數。如果不是單色設備，則值等于0
resolution 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan 定義電視類設備的掃描工序
grid 用來查詢輸出設備是否使用柵格或點陣。只有1和0才是有效值，1代表是，0代表否
轉載于:https://www.cnblogs.com/yexiang520/p/5537325.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： sp存储
- 下一篇： Leetcode 之Evaluate R