高級選擇器分為：后代選擇器、子代選擇器、并集選擇器、交集選擇器

后代選擇器

使用空格表示后代選擇器。顧名思義，父元素的后代（包括兒子，孫子，重孫子）

.father .item .a p{color: red;}

子代選擇器

使用>表示子代選擇器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。

并集選擇器

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標簽。一些共性的元素，可以使用并集選擇器 (統一樣式 重置樣式? 組合選擇器)

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,
input,textarea,th,td {margin: 0; padding: 0}

交集選擇器

使用.表示交集選擇器。第一個標簽必須是標簽選擇器，第二個標簽必須是類選擇器 語法：div.active

h4.active{ackground: #00BFFF;}

它表示兩者選中之后元素共有的特性

通配符選擇器

重置樣式

*{margin: 0;padding: 0}
??

屬性選擇器

字面意思就是根據標簽中的屬性，選中當前的標簽。屬性選擇器僅限于在表單控件中????

/*根據屬性查找*//*[for]{color: red;}*//*找到for屬性的等于username的元素 字體顏色設為紅色*//*[for='username']{color: yellow;}*//*以....開頭 ^*/ /*[for^='user']{color: #008000;}*//*以....結尾 $*//*[for$='vvip']{color: red;}*//*包含某元素的標簽*//*[for*="vip"]{color: #00BFFF;}*//**//*指定單詞的屬性*/label[for~='user1']{color: red;}input[type='text']{background: red;} 偽類選擇器

一般會用在超鏈接a標簽中，使用a標簽的偽類選擇器，我們一定要遵循"愛恨準則" LoVe HAte
　　/*沒有被訪問的a標簽的樣式*/
??????? .box ul li.item1 a:link{
?????????? ?
??????????? color: #666;
??????? }
??????? /*訪問過后的a標簽的樣式*/
??????? .box ul li.item2 a:visited{
?????????? ?
??????????? color: yellow;
??????? }
??????? /*鼠標懸停時a標簽的樣式*/
??????? .box ul li.item3 a:hover{
?????????? ?
??????????? color: green;
??????? }
??????? /*鼠標摁住的時候a標簽的樣式*/
??????? .box ul li.item4 a:active{
?????????? ?
??????????? color: yellowgreen;
??????? }
行內標簽：
?? ??? ??? ?a span
?? ??? ??? ?1、在一行內顯示
?? ??? ??? ?2、不能設置寬高
?? ??? ??? ?3、寬高 是內容的寬高

?? ??? ??? ?行內塊
?? ??? ??? ?1.在一行內顯示
?? ??? ??? ?2.可以設置寬高

?? ??? ??? ?塊級標簽
?? ??? ??? ?div p ul li
?? ??? ??? ?1、獨占一行
?? ??? ??? ?2、可以設置標簽寬高
?? ??? ??? ?3、如果不設置寬高，默認body100%寬度 nth-child()選擇器

　　　　 /*選中第一個元素*/
??????? div ul li:first-child{
??????????? font-size: 20px;
??????????? color: red;
??????? }
??????? /*選中最后一個元素*/
??????? div ul li:last-child{
??????????? font-size: 20px;
??????????? color: yellow;
??????? }
?????? ?
??????? /*選中當前指定的元素? 數值從1開始*/
??????? div ul li:nth-child(3){
??????????? font-size: 30px;
??????????? color: purple;
??????? }
?????? ?
??????? /*n表示選中所有,這里面必須是n, 從0開始的? 0的時候表示沒有選中*/
??????? div ul li:nth-child(n){
??????????? font-size: 40px;
??????????? color: red;
??????? }
?????? ?
??????? /*偶數*/
??????? div ul li:nth-child(2n){
??????????? font-size: 50px;
??????????? color: gold;
??????? }
??????? /*奇數*/
??????? div ul li:nth-child(2n-1){
??????????? font-size: 50px;
??????????? color: yellow;
??????? }
??????? /*隔幾換色? 隔行換色
???????????? 隔4換色 就是5n+1,隔3換色就是4n+1
??????????? */
?????? ?
??????? div ul li:nth-child(5n+1){
??????????? font-size: 50px;
??????????? color: red;
??????? } 偽元素選擇器（很重要）

/*設置第一個首字母的樣式*/
??????? p:first-letter{
??????????? color: red;
??????????? font-size: 30px;

??????? }
?????? ?
/* 在....之前 添加內容?? 這個屬性使用不是很頻繁 了解? 使用此偽元素選擇器一定要結合content屬性*/
??????? p:before{
??????????? content:'alex';
??????? }
?????? ?
?????? ?
/*在....之后 添加內容，使用非常頻繁 通常與咱們后面要講到布局 有很大的關聯（清除浮動）*/
??????? p:after{
??????????? content:'&';
??????????? color: red;
??????????? font-size: 40px;
??????? }

css有兩大特性：繼承性和層疊性

繼承性

面向對象語言都會存在繼承的概念，在面向對象語言中，繼承的特點：繼承了父類的屬性和方法。那么我們現在主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。

繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是我們的css中的繼承。

記住：有一些屬性是可以繼承下來 ： color 、 font-*、 text-*、line-*?。主要是文本級的標簽元素。

但是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。

?

層疊性

層疊性： 權重的標簽覆蓋掉了權重小的標簽，說白了 ，就是被干掉了
權重： 誰的權重大，瀏覽器就會顯示誰的屬性

誰的權重大？ 非常簡單就是小學的數數。

數：id的數量 class的數量 標簽的數量，順序不能亂

?

1.先看標簽元素有沒有被選中，如果選中了，就數數 （id,class,標簽的數量） 誰的權重大 就顯示誰的屬性。權重一樣大，后來者居上
2.如果沒有被選中標簽元素，權重為0。如果屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性
3.繼承來的，描述的一樣近，數權重
4.繼承來的，描述的一樣近，權重一樣，后來者居上

!important 的使用。

！important:設置權重為無限大
!important 不影響繼承來的權重，只影響選中的元素。不要隨便使用!important,因為使用它會影響頁面的布局

盒模型

在CSS中，"box model"這一術語是用來設計和布局時使用，然后在網頁中基本上都會顯示一些方方正正的盒子。我們稱為這種盒子叫盒模型。

盒模型有兩種：標準模型和IE模型。我們在這里重點講標準模型。

盒模型的屬性

width：內容的寬度

height: 內容的高度

padding：內邊距，邊框到內容的距離

border: 邊框，就是指的盒子的寬度

margin：外邊距，盒子邊框到附近最近盒子的距離

盒模型的計算

盒子的真實寬度=width+2*padding+2*border

盒子的真實寬度=height+2*padding+2*border

但是，標準盒模型，width不等于盒子真實的寬度。

另外如果要保持盒子真實的寬度，那么加padding就一定要減width，減padding就一定要加width。真實高度一樣設置。

padding

padding：就是內邊距的意思，它是邊框到內容之間的距離

另外padding的區域是有背景顏色的。并且背景顏色和內容的顏色一樣。也就是說background-color這個屬性將填充所有的border以內的區域

?

padding的設置

padding有四個方向，分別描述4個方向的padding。

描述的方法有兩種

1、寫小屬性,分別設置不同方向的padding

padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;

2、寫綜合屬性，用空格隔開

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右? 下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
?????????? ?
/*上下左右*/
padding: 20px;

?

一些標簽默認有padding

比如ul標簽，有默認的padding-left值。

那么我們一般在做站的時候，是要清除頁面標簽中默認的padding和margin。以便于我們更好的去調整元素的位置。可以使用通配符選擇器

reset.css?? https://meyerweb.com/eric/tools/css/reset/

邊框

border:邊框的意思，描述盒子的邊框

邊框有三個要素： 粗細 線性樣式 顏色?? 線性樣式：solid dotted double dashed; ? ?顏色：transparent 透明

如果顏色不寫，默認是黑色。如果粗細不寫，不顯示邊框。如果只寫線性樣式，默認的有上下左右 3px的寬度,實體樣式，并且黑色的邊框。

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;

使用border來制作小三角

*小三角 箭頭指向下方*/div{width: 0; height: 0; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; }

margin

margin：外邊距的意思。表示邊框到最近盒子的距離。

?/*表示四個方向的外邊距離為20px*/

margin: 20px;

/*表示盒子向下移動了30px*/

margin-top: 30px;

/*表示盒子向右移動了50px*/

margin-left: 50px;
margin-bottom: 100px;

?

總結： 高級選擇器：后代選擇 : div p子代選擇器 ： div>p并集選擇器： div,p交集選擇器： div.active屬性選擇器：[屬性~='屬性值'] 偽類選擇器a LoVe HAte 必須要 遵循這個準則 “愛恨準則”nth-child(3n+1)first-childlast-child

提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

繼承性和層疊性繼承性： 文本的屬性： color text-*,line-*,font-* 盒子屬性 定位布局的元素層疊性： 1.先看標簽元素有沒有被選中，如果選中了，就數數 （id,class,標簽的數量），誰的權重大 就顯示誰的屬性。權重一樣大，
后來者居上 2.如果沒有被選中標簽元素（繼承來的），權重為0。如果屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述
的近，就顯示誰的屬性 3.繼承來的，描述的一樣近，數權重 4.繼承來的，描述的一樣近，權重一樣，后來者居上盒模型： width：內容寬度 height：內容的高度 padding：盒子的內邊距，內邊距能填充盒子，+padding-left，如果要保持盒子不變，減width border:盒子的邊框三要素： 粗細 線性樣式 顏色border: 1px solid red;margin: 外邊距。

?

標準文檔流

1.空白折疊現象

多個空格會被合并成一個空格顯示到瀏覽器頁面中。img標簽換行寫。會發現每張圖片之間有間隙，如果在一行內寫img標簽，就解決了這個問題，但是我們不會這樣去寫我們的html結構。這種現象稱為空白折疊現象。

2.高矮不齊，底邊對齊

文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器查看我們的頁面總會發現底邊對齊

3.自動換行，一行寫不滿，換行寫

如果在一行內寫文字，文字過多，那么瀏覽器會自動換行去顯示我們的文字。

塊級元素和行內元素

• 文本級標簽：p、span、a、b、i、u、em。
• 容器級標簽：div、h系列、li、dt、dd。

塊級標簽：
?? ??? ?1.獨占一行
?? ??? ?2.可以設置寬度
?? ??? ?3.如果不設置寬高，默認是父元素的100%寬度

?? ??? ?h1~h6 div ul li form table

?? ??? ?行內標簽：
?? ??? ?1.在一行內顯示
?? ??? ?2.不能設置寬度
?? ??? ?3.它的寬高是內容的寬高

?? ??? ?行內塊標簽：
?? ??? ?1.在一行內顯示
?? ??? ?2.可以設置寬度

• 行內元素：除了p之外，所有的文本級標簽，都是行內元素。p是個文本級，但是是個塊級元素。

• 塊級元素：所有的容器級標簽都是塊級元素，還有p標簽。

?

?

塊級元素和行內元素的相互轉換

?

display即“顯示模式”

?

塊級元素可以轉換為行內元素：display: inline;

?

這個標簽將立即變為行內元素，此時它和一個span無異。inline就是“行內”。也就是說：

• 此時這個div不能設置寬度、高度；
• 此時這個div可以和別人并排了

?

?

行內元素轉換為塊級元素：display: block;

?

這個標簽將立即變為塊級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：

?

• 此時這個span能夠設置寬度、高度
• 此時這個span必須霸占一行了，別人無法和他并排
• 如果不設置寬度，將撐滿父親

?

?

隱藏當前的元素，但是不占當前位置
?? ??? ??? ?display: none;

隱藏當前的元素，但是占據當前位置
?? ??? ??? ?visibility: hidden;

標準流里面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要并排、并且就要設置寬高，那該怎么辦呢？辦法是：移民！脫離標準流！

?

css中一共有三種手段，使一個元素脫離標準文檔流：

?

• （1）浮動
• （2）絕對定位
• （3）固定定位

?

?

浮動

?

浮動是css里面布局最多的一個屬性，也是很重要的一個屬性。

?

float：表示浮動的意思。它有四個值。

?

?left ：元素向左浮動。

?right ：元素向右浮動。

?

?none ：默認值。

?

?inherit ：從父元素繼承float屬性。

?

?

那么浮動如果大家想學好，一定要知道它的四大特性

?

1.浮動的元素脫標 ? ?? 脫標：就是脫離了標準文檔流

?

2.浮動的元素互相貼靠???? 如果父元素有足夠的空間，那么3哥緊靠著2哥，2哥緊靠著1哥，1哥靠著邊。如果沒有足夠的空間，那么就會靠著1哥，如果再沒有足夠的空間靠著1哥，自己往邊靠 ?

?

3.浮動的元素由"子圍"效果?? 所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果。

?

4.收縮的效果?? 一個浮動元素。如果沒有設置width，那么就自動收縮為文字的寬度

一個行內元素當設置浮動以后，可以設置寬高。一個塊級元素設置浮動也可以設置寬高。總結一句話：任何標簽只要設置浮動了，都可以設置寬和高。另外一個div元素，如果設置浮動之后，不設置寬高，會發現，它收縮了，變成了內容的寬度（有點像行內元素）

大家一定要謹記：關于浮動，我們初期一定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一起浮動。另外，有浮動，一定要清除浮動，

?

為什么要清除浮動：方便修改，提高開發效率。

方法：1. 給父盒子設置高度

?????????? 2. clear:both

?????????? 3. 偽元素清除法

?????????? 4. overflow：hidden

給父盒子設置高度

這個方法給大家上個代碼介紹，它的使用不靈活，一般會常用頁面中固定高度的，并且子元素并排顯示的布局。比如：導航欄

clear：both

clear：意思就是清除的意思。

有三個值：

left：當前元素左邊不允許有浮動元素

right：當前元素右邊不允許有浮動元素

both：當前元素左右兩邊不允許有浮動元素

給浮動元素的后面加一個空的div，并且該元素不浮動，然后設置clear：both。

<div class="clearfix"></div>

.clearfix{clear: both;}

偽元素清除法(常用)

給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然后設置

/*新浪首頁清除浮動偽元素方法*/content: ".";display: block;height: 0;clear: both;visibility: hidden；

overflow:hidden(常用)

overflow屬性規定當內容溢出元素框時發生的事情。

說明：

這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。

有五個值：

值

描述

默認值。內容不會被修剪，會呈現在元素框之外。????????????????? ?? visible

內容會被修剪，并且其余內容是不可見的。??????? ? ? ? ? ? ? ? ? ? ?? hidden

內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。??? scroll

如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。??? auto

規定應該從父元素繼承 overflow 屬性的值。 ? ? ? ? ? ? ? ? ? ? ? ? ??inherit

逐漸演變成overflow：hidden清除法。

其實它是一個BFC區域:?https://blog.csdn.net/riddle1981/article/details/52126522

?

margin塌陷問題

標準流下的盒子。垂直方向出現塌陷問題。以大設置的值為準

浮動元素的盒子，垂直方向不會出現問題。

使用margin：0 auto;注意點：

1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;?

2.只有標準流下的盒子 才能使用margin:0 auto;?

當一個盒子浮動了，固定定位，絕對定位(后面會講)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外大家一定要知道margin屬性是描述兄弟盒子的關系，而padding描述的是父子盒子的關系

善于使用父親的padding，而不是margin

文本屬性

文本對齊

text-align 屬性規定元素中的文本的水平對齊方式。

屬性值：none | center | left | right | justify（英文，兩端對齊）

文本顏色

color屬性

文本首行縮進

text-indent 屬性規定元素首行縮進的距離，單位建議使用em

1em=16px

文本修飾

text-decoration屬性規定文本修飾的樣式

屬性值：none(默認) | underline(下劃線) | overline(定義文本上的一條線)? | line-through (定義穿過文本下的一條線) |?inherit(繼承父元素的text-decoration屬性的值。)

行高

line-height就是行高的意思，指的就是一行的高度。垂直居中?? line-height: (快高)?

字體屬性

字體大小

font-size表示設置字體大小，如果設置成inherit表示繼承父元素的字體大小值。

?

轉載于:https://www.cnblogs.com/Mr-Murray/p/9079437.html

總結

以上是生活随笔為你收集整理的0523 CSS知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

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