前端 css選擇器的複習

2022-02-15 04:42:43 字數 1852 閱讀 2208

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>三種匯入css的方式

title

>

<

style

>

body

style

>

<

link

rel="stylesheet"

href

="選擇器的複習.css"

>

head

>

<

body

>

<

p style

="color: red"

>這是乙個有顏色的標題

p>

body

>

html

>

/*

注釋是**之母 這就是單行注釋

*//*

這是乙個多行注釋

多行注釋

123*/

/*css有叫做層疊樣式表 每乙個css 都由 兩部分組成 第一是 選擇器 第二是 宣告 宣告有分為屬性 和 值

*//*

基本選擇器分為 標籤選擇器/元素選擇器 id選擇器 類選擇器 和 通用選擇器 下面一以介紹

*//*

標籤選擇器/元素選擇器

*/div

/*id選擇器

*/#id

/*類選擇器

*/.class

/*通用選擇器

*/*

/*然後就是 分組選擇器 分為 兒子選擇器 後代選擇器 毗鄰選擇器 弟弟選擇器

*//*

後代選擇器

*//*

指定 div 下所有的 span

*/div span

/*兒子選擇器 div 下一級的所有的 span

*/div > span

/*毗鄰選擇器 緊挨著 div標籤後的標籤

*/div + span

/*弟弟選擇器 div 同級標籤

*/div ~ span

/*屬性選擇器 分為 具有某個元素名 具有某個元素名 和 值 具有某個 元素名 和 值 和 標籤 看到中括號 就反應是屬性選擇器

*/[title] [title='234'] input [title='234']

/*分組與巢狀 分組就是 相同的選擇器 不同的標籤 巢狀就是 不同的選擇器 放在一起

*//*

分組*/

div,span,p

/*巢狀

*/#id, .class, div span

/*偽類選擇器

*//*

標籤 : 加樣式

*/a:link /*

未訪問 鏈結顏色

*/a:hover /*

滑鼠移動到標籤上

*/a:active /*

選定鏈結

*/a:visited /*

已經訪問的鏈結

*//*

input輸入框獲取焦點時樣式

*/input:focus

/*偽元素選擇器

*/p:first-letter

/*在每個元素之前插入內容

*/p:before

/*在每個元素之後插入內容

*/p:after

CSS選擇器複習

通用選擇器 選擇到所有的元素 選擇子元素 選擇到元素的直接後代 第一級子元素 相鄰兄弟選擇器 選擇到緊隨目標元素後的第乙個元素 普通兄弟選擇器 選擇到緊隨其後的所有兄弟元素 偽類選擇器 before,after在元素內容前面 後面新增內容 相當於行內元素 css3結構選擇器 nth child 選擇...

前端 css 選擇器

css 為了修飾頁面作用,讓頁面好看 css的引入方式 1,行內樣式 body裡面 2,內接樣式 在html裡面的 style 裡面 3,外接樣式 兩種 鏈結式 匯入式 優先順序 行內優先順序 最高 內接的優先順序 外接優先順序 引入 id 的優先順序 比 class 的優先順序要高 標籤選擇器 d...

CSS複習1 選擇器

css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。每條宣告由乙個屬性和乙個值組成。屬性 property 是您希望設定的樣式屬性 style attribute 每個屬性有乙個值。屬性和值被冒號分開。你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇...