7 27筆記選擇器

2021-10-09 06:57:13 字數 1920 閱讀 8398

樣式寫法;鍵:值;

css的引入方式:1.行內樣式、內聯樣式 通過style樣式來引入,在標記內增加style屬性,在值中寫樣式。缺點:只能修改所在標記,不能批量修飾。

2.頁內樣式 使用style標記一般寫在head裡,優點可以使用*{}批量選擇符

3.引入外部樣式表:使用link標記,引入外部樣式表檔案,可以修飾多個頁面,只需要引入樣式表即可,無缺點。

基礎選擇器

1.#{} id選擇器:根據元素的id來選擇

2.{}選擇器:全選,選中所以元素

3…{}類選擇器:根據元素的class名稱來進行選擇,使用頻率最高

4.標記選擇器:使用元素標記來選擇,選擇同型別的標記

高階選擇器;

1.子代選擇器:a>b,選中a選擇器所選中的元素子代(滿足b選擇器)

2.後代選擇器:a b,選中a選擇器所選中的元素子代(滿足b選擇器)

3.並集選擇器:a,b選中a和b選擇器選中的元素的和

4.交集選擇器:ab 取a選擇器和b選擇器選中的元素的交集,

5.兄弟選擇器:a+b a-b選中緊鄰弟 a~b選中所以弟,使用頻率較低。

borther-collapse:取消邊框重疊

偽類選擇器:不是自定義的類名稱,有特殊含義的

1.frist-child:選中所以作為其父元素的第乙個子元素

2.last-child:選中所以作為其父元素的最後乙個子元素

3.nth-child(n)選中所有作為其父元素的指定的第幾個子元素

4.選擇器:hover:適用所有元素,定義滑鼠劃過的樣式,選擇器可以是任意元素

5.a:active:僅適用於超連結,按下即啟用

6.a:link:僅適用於超連結,預設時的樣式

7.a: visited:僅適用於超連結,點開則訪問過後。

愛恨法則:love hate

偽元素選擇器

1.::before:通過content指定元素內容,作為子元素新增在某乙個元素的前面2.::after:通過content指定元素內容,作為子元素新增在某乙個元素的後面常用樣式:

1.width

2.height

3.background-color:背景色

4.font-size:用於指定字型大小,單位px

5.color:前景色,文字顏色

6.font-wight:字重,普通顯示normal,加粗使用bold

7.font-style:italic字型斜體

8.text-decoration:underline,下劃線修飾

9.text-algin:center、left、right文字對齊方式

10.border:1px solid#ccc;線寬、線型、線色

11.border-collapse:collapse 給**設定取消邊框重疊

12.border-radius:邊框圓角。單位px或者百分比

13.vertical-align:top、bottom ,left,right 內聯元素垂直方式對齊如果你在border-radius 屬性中只指定乙個值,那麼將生成 4 個 圓角。但是,如果你要在四個角上一一指定,可以使用以下規則:四個值: 第乙個值為左上角,第二個值為右上角,第三個值為右下角,第四個值為左下角。三個值: 第乙個值為左上角, 第二個值為右上角和左下角,第三個值為右下角兩個值: 第乙個值為左上角與右下角,第二個值為右上角與左下角乙個值: 四個圓角值相同

優先順序順序

下列是乙份優先順序逐級增加的選擇器列表

:通用選擇器()

元素(型別)選擇器

類選擇器

屬性選擇器

偽類id 選擇器

內聯樣式

8 27筆記選擇器

元素選擇器 用標籤名作為選擇器,選中所有相應的元素 類選擇器 根據class的屬性來選擇元素,樣式定義為 classname id選擇器 根據id名來選擇元素,樣式定義為 idname 屬性選擇器 選擇器 描述 attribute 選取帶有指定屬性的元素。12456 attribute value ...

CSS的一點筆記 選擇器 基本概念

本文所有例子均摘自 www.w3school.org css是為了能夠防止對html元素進行重複定義。比如說,我們希望所有的標題都是黑色粗體,那麼只需要統一定義 黑色粗體 的型別叫做a,然後指定所有的標題的 型別 都是a,就達到了目的。這樣 量較小。同時也可以統一進行修改。有以下幾種情況可能會導致重...

屬性選擇器,子元素選擇器,偽元素選擇器筆記

屬性選擇器 屬性名稱 屬性名稱 屬性值 子元素選擇器 第n個子元素 元素 nth child 1 最後乙個子元素 元素 last child 全部子元素 test test2 直接子元素 test test2 選擇後面的乙個元素 test div 選擇後面的多個元素 test div偽元素 通過cs...