2023年11月 選擇器的基本用法和Css的特性

2021-07-25 08:04:55 字數 1427 閱讀 9554

3種基本的選擇器:  標籤選擇器   id選擇器  類選擇器

4種復合的:  後代選擇器  交集選擇器  並集選擇器

三  css的特性

1 繼承性 :有一些屬性,當給自己設定的時候,

自己的後代就已經繼承,哪些屬性可以被繼承?

color、text-開頭的、font-開頭的,line-開頭的這些文字樣式的

可以被繼承 ;盒子、布局、定位不能被繼承的

如何讓整個頁面設定字型大小為14px,字型顏色為灰色

body

2 層疊性(面試或筆試常出現)

a 當多個選擇器出現,會對元素樣式造成影響;

b css處理衝突的能力

如何計算權重?

id選擇器的數量  類選擇器的數量   標籤選擇器的數量,依次比較

id數量大的就權重高,若相等,接著比類數量,依次類推,假如

三者數量都一樣即權重一樣,誰在後面聽誰的

注意:選擇器沒有直接選中到元素,通過繼承設定的,此時

權重為0,若大家都是0,誰描述的近,就聽誰的

1         1               1

1        0                  3

0          3              4  

四  ******盒模型 (非常重要)

盒子: 能放內容的標籤,如p、div、span、a等

與盒子相關的屬性:

width:  寬度  指的是盒子內容的寬

height: 高度  指的是盒子內容的高

padding: 內邊距

margin: 外邊距

border:   邊框

盒子真實的寬度=左邊框的寬度+左padding+width+右padding+右邊框

......................高    = 上邊框+上padding+height+下padding+下邊框

padding屬性的寫法:

用小屬性(分別描述):

padding-top: 上內邊距

padding-right: 右內邊距

padding-bottom: 下內邊距

padding-left: 左內邊距

綜合屬性: padding:40px; 表示上下左右都是40px

padding: 10px 20px 20px 30px;

上     右     下     左    (順時針方向)

padding: 10px 20px 30px;

上    右     下     左(右)

padding: 10px 20px;  

上    右     下(上) 左(右)

div

做網頁的時候,需要清除預設樣式,清除的辦法如下

* border: 邊框

邊框三要素: 粗細   顏色  形狀(線型)

jQuery的基本選擇器

jquery的基本選擇器 響應函式 寫在function 的中括號中。btn1 click function btn2 click function btn3 click function btn4 click function btn5 click function id btn1 button ...

基本的jQuery選擇器

名稱 選擇器語法 功能全選選擇器 選取所有元素,不管他們的名字 元素選擇器 元素名選取名字匹配的所有元素,例如 input id選擇器 id通過id匹配乙個元素 例如 field 類選擇器 class 選取類名匹配乙個元素 例如.tabs 後代選擇器 父子選擇父元素中任意位置的子元素 例如 list...

jQuery 基本的選擇器

名稱 用法描述 id選擇器 id 獲取指定id的元素 類選擇器 class 獲取同一類class的元素 標籤選擇器 div 獲取同一類標籤的所有元素 並集選擇器 div,p,li 使用逗號分隔,只要符合條件之一就可。交集選擇器 div.redclass 獲取class為redclass的div元素 ...