CSS3學習筆記 選擇器

2022-04-29 12:51:07 字數 1264 閱讀 6335

類選擇器 class="classname"

.classname 選取class為classname的元素

p.chassname 選取p標籤中class為classname的元素

.classname1.classname2   選取同時擁有.classname1和.classname2的元素

id選擇器 id="id"

p#idname  選取p標籤中id為id的元素

標籤選擇器

p span 選取p標籤下的所有span元素

p>span  選取p標籤下一級的所有子span元素

p+span 選取p標籤的下乙個兄弟元素span

p~span 選取p標籤後的所有的兄弟span元素

通配選擇符

p * span  選取所有p的孫子span

常用偽類選擇器(推薦在css3中使用::而不是:)

a:link

a:hover懸停

a:visited 訪問過

a:active使用者點選時

:focus獲得焦點時的樣式

:targeta標籤href=『#id』指向同頁面的id標識的元素時,設定的樣式。

::first-letter 首字母

::first-line首行

::before元素前

::after

元素內容後面新增而不是元素後面新增

::selection 用來匹配突出顯示的文字。用滑鼠拉取複製的樣式。

語言偽類選擇器

e:lang(en)  e:lang(zh)

ui元素狀態選擇器

:checked  :disabled :enabled

:nth-of-type比:nth_child更為可靠,選擇的是某父元素下同型別的子元素。

:only-of-type 表示乙個元素有很多個子元素,而其中只有乙個元素是唯一的。例子:元素中只有乙個元素時的樣式和元素中有多個元素時的樣式。

:not()否定選擇器   例如::not(input[type="submit"])

tips

a標籤href屬性設定『#id』可以導航到同一頁面上具有id的標籤處,設定『#』則會返回頁面頭部

id用於標記頁面中的塊級元素,類適用於具有相同型別的元素

css3學習筆記 css3選擇器

e attr 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 css ul,li lihtml class linksitem id...

CSS3學習筆記 選擇器

css3 選擇器 1.1屬性選擇器 e attr value 指定屬性名,找到以value開頭的屬性值 e attr value 指定屬性名,找到以value結尾的屬性值 e attr value 指定屬性名,找到包含value開頭的屬性值 1.2為類選擇器 1.2.1 使用者介面相關的 e ena...

css3 選擇器 CSS3選擇器

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