css3基礎選擇器

2022-06-27 06:21:09 字數 3036 閱讀 3658

知識點一:圓形

border-radius: 左上角  右上角  右下角  左下角;大小越靠近寬度和高度,角度就越大

知識點二:相容性問題

-webkit- 谷歌 safari

-o- 歐朋

-ms-  ie

-moz- 火狐

知識點三:pc端除錯移動端方法

iphone :解析度是最小的

知識點四:選擇器

(一)屬性選擇器

[attribute]

[target]

選擇所有帶有target屬性元素

[attribute=value]

[target=-blank]

選擇所有使用target="-blank"的元素

選擇每乙個src屬性的值以"https"開頭的元素

[attribute$=value]

a[src$=".pdf"]

選擇每乙個src屬性的值以".pdf"結尾的元素

[attribute*=value]

a[src*="runoob"]

選擇每乙個src屬性的值包含子字串"runoob"的元素

( 二)偽類選擇器

:nth-child(n)

p:nth-child(2)

選擇每個p元素是其父級的第二個子元素

:nth-last-child(n)

p:nth-last-child(2)

選擇每個p元素的是其父級的第二個子元素,從最後乙個子項計數

:nth-of-type(n)

p:nth-of-type(2)

選擇每個p元素是其父級的第二個p元素

:nth-last-of-type(n)

p:nth-last-of-type(2)

選擇每個p元素的是其父級的第二個p元素,從最後乙個子項計數

:last-child

p:last-child

指定只有選擇每個p元素是其父級的最後乙個子級。

:first-child

p:first-child

指定只有當元素是其父級的第乙個子級的樣式

(三)偽元素選擇器

:first-letter

p:first-letter

選擇每乙個元素的第乙個字母或者第乙個漢字

:first-line

p:first-line

選擇每乙個元素的第一行

:before

p:before

在每個元素之前插入內容

:after

p:after

在每個元素之後插入內容

知識點五:顏色(四種樣式)

1、英文名的

2、background: rgb(255,255,255);   background:rgba(255,255,255,1)  最後一位是透明度,取值範圍是0-1之間,其餘的取值範圍是0-255

3、十六進製制  #ffffff

4、background:hsl(色調,飽和度,亮度);   background:hsla(色調,飽和度,亮度,透明度);   

色調 (0-360) 0--紅色  120--綠色  240--藍色

飽和度(0-100%)

亮度(0-100%)

透明度(0-1)0表示完全透明

知識點六:盒子和文字陰影

box-shadow:x軸,y軸,模糊半徑,顏色;

text-shadow:x軸,y軸,模糊半徑,顏色;

知識點七:文字溢位

(單行溢位)

white-space: nowrap;

overflow:hidden;

text-overflow:ellipsis;

(多行溢位)

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: n;

overflow: hidden;

知識點八:邊框

border-image: url(位址) 10 10 round/stretch;round 是否平鋪 stretch是否

配合  border: 1px solid #000000;

知識點九:副文字框

原有的:

新學的:在盒子上加屬性overflow: auto;   和 resize;both/vertical/horizontal/;  both水平和垂直方向上的   vertical 垂直方向的  horizontal 水平方向的

以上兩者配合使用

知識點十:禁用

cursor: not-allowed;  加在偽類hover事件上的

知識點十一:box-sizing

box-sizing 屬性允許你以某種方式定義某些元素,以適應指定區域。屬性值

說明

content-box

這是 css2.1 指定的寬度和高度的行為。指定元素的寬度和高度(最小/最大屬性)適用於box的寬度和高度。元素的填充和邊框布局和繪製指定寬度和高度除外

border-box

指定寬度和高度(最小/最大屬性)確定元素邊框。也就是說,對元素指定寬度和高度包括了 padding 和 border 。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

inherit

指定 box-sizing 屬性的值,應該從父元素繼承

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

css 3 基礎選擇器。

css3 選擇器。基礎選擇器 通配選擇器 選中所有,不建議使用 e 元素選擇器,在rest.css 經常用到,用與將各個瀏覽器元素預設樣式統一 id id 選這器 class 類選擇器 selector selectorn 群租選擇器。以上的我們比較常用,而且所有瀏覽器都支援的 css選擇器。層次選...

CSS3基礎選擇器

選擇器分組 多個選擇器使用同乙個樣式 h1,h2,astrong 選擇器繼承 body中未設定樣式的會使用繼承得到的樣式 body 派生選擇器 通過元素在其位置的上下關係來定義樣式 li strong 派生選擇器與id選擇器 派生選擇器 通過元素在其位置的上下關係來定義樣式 li strong id...