前端基礎 02 CSS選擇器

2021-08-10 18:27:54 字數 1198 閱讀 8112

#css樣式分為3種:

#優先順序:行內樣式》內嵌樣式》外部樣式

1.行內樣式:

"width: 300px;height: 300px;background: green">

2.內嵌樣式

head中間新增樣式:3.外部樣式

lesson.css樣式檔案:

div

#引用方式:

"stylesheet" href="lesson.css">

擴充套件:修改頁面頁籤的圖示:

"shortcut icon" href="image/test1.ico">

#1.萬用字元選擇器

* #2.標籤(tagname)選擇器

div

#3.class選擇器,一般給具有相同屬性的元素設定同乙個class

.box

#4.id選擇器,id具有唯一性

#box

#5. +是相鄰選擇器,操作的物件是該元素後的同級元素,只會針對乙個元素

div + p+p

#6.群組選擇器,對幾個相同熟悉的選擇器進行樣式設定,div和p都生效

div, p

#7. ~ 是兄弟選擇器:div後所有同級p元素生效

div ~ p

#8.>子代選擇器 :div所有子元素p生效,變成藍色

div > p

#9.後代選擇器:可以指定某一層級子元素生效,div的下面所有li元素樣式生效

div li

#10.偽選擇器

#a標籤:

a:link

a:visited

a:hover

a:active

#div標籤:

div

div:hover

div:hover p

#11.通用選擇器的優先順序:

選擇器優先順序:

(*)class類選擇器<(#)id選擇器

級別相同的選擇器,後面的樣式會覆蓋前面的

複雜後代選擇器:

1.先比id 再比class 再比tagname

2.id選擇器個數不相等,id越多,優先順序越高

3.id選擇器相同,則比class,在比tagname

# 快捷鍵:

ul>li*5 + tabl 快捷輸出5個li標籤

02 css基礎選擇器

1.css選擇器作用 找到特點的html元素 css分為兩件事 選對標籤 做對事 選擇器分為基礎選擇器 和 復合選擇器 2.css基礎選擇器 2.1標籤選擇器 概念 標籤選擇器 元素選擇器 是指用 html標籤名 稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。語法 標籤名 作...

02 css的選擇器

css的選擇器 1.基本選擇器 2.高階選擇器 基本選擇器包含 1.標籤選擇器 標籤選擇器可以選中所有的標籤元素,比如div,ul,li p等等,不管標籤藏的多深,都能選中,選中的是所有的,而不是某乙個,所以說 共性 而不是 特性 body 標籤選擇器 p span 2.id選擇器 選中id 同乙個...

02 css的選擇器

css的選擇器 1.基本選擇器 2.高階選擇器 基本選擇器包含 1.標籤選擇器 標籤選擇器可以選中所有的標籤元素,比如div,ul,li p等等,不管標籤藏的多深,都能選中,選中的是所有的,而不是某乙個,所以說 共性 而不是 特性 body 標籤選擇器 pspan 2.id選擇器 選中id 同乙個頁...