一、CSS的定義方式

1.內部樣式：<style></style>

2.行間樣式：<div style="width:100px;height:100px;">

3.外部樣式：<link rel="stylesheet" type="text/css" href="地址" >

注：瀏覽器異步加載html、css、js文件

二、CSS選擇器

1.常用選擇器：類選擇器、id選擇器、標簽選擇器、通配符選擇器

/*類選擇器*/
/*假設頁面有一個或多個同類名元素，且該類元素有一些共同的樣式特性。當然通常我們的設計邏輯是有這樣一些共同特性元素的需求，預先設計編寫一組樣式表，用來描述具備特定需求的元素。*/ /*假設有需求是有一些元素的寬高為100px,內邊距和外邊距為0，文本內容，文本溢出部分被剪切*/ .exa{width: 100px;height: 100px;margin:0 auto;padding: 0 auto;text-align: center;line-height: 100px;overflow: hidden; }

標簽選擇器與類選擇器的使用邏輯非常相似，就是用來描述頁面同一類標簽的元素的樣式。類選擇器使用程序員自己在元素屬性上定義的class屬性值來選定（.類名），點加類名的方式來設置。而標簽選擇器直接使用標簽名即可。

id選擇器就是使用元素上定義的id屬性值來設置，在di屬性值前面加上井號“#”就可以實現，設置的特定的一個元素的樣式。實際開發中并不建議使用id選擇器來設置樣式表，根據項目和開發手冊要求來定。

通配符使用的應該是最少的一種，出現在常用名單里的原因是我們每個樣式表的第一行都是用星號“*”,即通配符來去除元素原本的默認樣式，如元素的默認邊距、列表標簽的默認序列號、超鏈接元素的默認字體顏色和下劃線、統一全局字體大小和字體及顏色等一系列應用。

2.父子選擇器/派生選擇器

基于標簽選擇器、類選擇器、id選擇器的父子關系進行篩選需要匹配的元素，每級條件用空格間隔。

/*比如有需求是：找到頁面中id為“showcase”的div下，所有有序列表的列表項內的img元素中，設置樣式為寬300px，高200px，內外邊距為0像素,超出部分隱藏*/ div #showcase ul li img{margin: 0 auto;padding: 0 auto;width: 100px;height: 100px;overflow: hidden; }

3并列選擇器

這個選擇器也是基于標簽選擇器、類選擇器、id選擇器來實現的，通過基礎選擇器組合，有別于父子選擇器的是并列選擇器的每個基礎選擇器之間不加空格。

/*例如有需求是：有一類元素是div并且都有類名是showcase和primary的樣式是，寬高249px；內外邊距為0，邊框1像素藍色*/ div.showcase.primary{width: 249px;height: 249px;padding: 0 auto;margin: 0 auto;border: 1px solid blue; }

4.直接子元素選擇器

是在父子選擇器的基礎上演變而來的一個選擇器，比如要找到一個div元素下的子元素em，但是在其他子元素下面還有em，所以就不能使用div em的父子選擇器來實現了，這時候就可以采用直接子元素選擇器div > em，在父子選擇器的基礎上添加一個大于號，中間可以加空格也可以不加空格。這樣就是可以實現匹配一個元素下的子元素，而不會影響到其他后代元素。

5屬性選擇器

?在通常的情況下我們使用類名作為選擇器或者id選擇器其本質都是屬性選擇器，所謂的屬性選擇器就是使用元素的屬性和屬性值作為匹配條件。

語法：[屬性值=屬性值]

屬性值的類型與元素上的一致，不需要發生改變。

/*比如有需求是找到img元素的圖片名稱是figure的元素，并設置寬300px，高250px，超出部分隱藏*/ img[src*="figure"]{width: 300px;height: 250px;overflow: hidden; }

注意留意中間出現的一個符號“*”，在屬性選擇器中還存在^、$、~、|四個特殊的符號。

星號（*）表示在屬性值中出現了指定的字符串。

（^）表示在屬性值內有以指定字符串開頭的屬性值。

（$）表示在屬性值內有以指定字符串結尾的屬性值。

（~）表示在屬性值內有指定的屬性值。

（|）表示在屬性值整個以指定的字符串開頭。

[class="aaa bbb ccc"]{...} /*(^)匹配屬性值內有指定的字符開頭的屬性*/ [class^="a"]{...} [class^="b"]{...} [class^="c"]{...} /*(|)匹配屬性值以指定的字符串開頭*/ [class|="a"]{...} [class|="aa"]{...} [class|="aaa b"]{...} ...

6.分組選擇器

分組選擇器就是同時有多個選擇器同時匹配一個樣式列表，使用逗號間隔。

.exa,div #showcase ul li img,div.showcase.primary,img[src*="figure"]{...}

7.偽類選擇器

通過指定偽類設置元素樣式，偽類即為不需設置就存在的類，css語法自有的類。在一定程度上解決了行為特性的需求。

?:active	向被激活的元素添加樣式
?:focus	向擁有鍵盤輸入焦點的元素添加樣式
?:hover	當鼠標懸浮元素上方時，向該元素添加樣式
?:link	向未被訪問的鏈接添加樣式
?:visited	向已被訪問的鏈接添加樣式
?:first-child	向元素的第一個子元素添加樣式
?:lang	向帶有指定lang屬性的元素添加樣式

?三、偽元素

1.在一個標簽內，內容前后隱式的存在邏輯上的兩個元素，內容的邏輯前是：before，內容的邏輯后是：after

2.在css中選取偽元素的語法：標簽名::before/after

3.偽元素中的content樣式屬性可以設置偽元素的內容，這個樣式只存在偽元素中，必須寫content才能生效（content:"";）

4.偽元素是行級元素

?:first-letter	向文本的第一個字母添加特殊樣式(只是應塊級元素)
?:first-line	向文本的首行添加特殊樣式（只適應塊級元素）
?:before	在元素之前添加內容
?:after	在元素之后添加內容

偽元素是由HTML語法給每一個標簽內置的虛擬但真實存在的元素，這里的屬性其實質是虛擬標簽的class值

四、css樣式權重

!important??????? infinity???? 正無窮???? 寫在樣式后面

行間樣式????????? 1000

id????????????????????? 100

class|屬性|偽類? 10

標簽 | 偽元素????? 1

通配符??????????????? 0

注：計算機的：正無窮+1 > 正無窮

權重數值采用的256進制計算。

css復合樣式的權重采用權重值相加，誰的權重值的和大使用誰。

?

轉載于:https://www.cnblogs.com/ZheOneAndOnly/p/10166682.html

總結

以上是生活随笔為你收集整理的学习总结：CSS(一)定义方式、选择器、选择器权重的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。