前端 css 選擇器

css 為了修飾頁面作用, 讓頁面好看

⑴ css的引入方式

1,行內樣式

body裡面

2,內接樣式

在html裡面的 style 裡面

3,外接樣式

兩種:①鏈結式:

②匯入式:

優先順序:

行內優先順序(最高) > 內接的優先順序 > 外接優先順序(引入)

id 的優先順序 比 class 的優先順序要高

標籤選擇器:

div...

text -decoration :underline 下劃線

字型大小只有偶數 沒有奇數

高階選擇器

高階選擇器分為：後代選擇器、子代選擇器、並集選擇器、交集選擇器
後代選擇器
使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）
1.container p
4.container .item p
子代選擇器
使用》表示子代選擇器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。
1 .container>p
並集選擇器
多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可以使用並集選擇器
1 /*並集選擇器*/
2h3,a
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td 
/*使用此並集選擇器選中頁面中所有的標籤，頁面布局的時候會使用*/交集選擇器
使用.表示交集選擇器。第乙個標籤必須是標籤選擇器，第二個標籤必須是類選擇器 語法：div.active
比如有乙個
這樣的標籤。
那麼 1h4
5.active
9 /* 交集選擇器 */
10h4.active
它表示兩者選中之後元素共有的特性。
04-屬性選擇器
屬性選擇器，字面意思就是根據標籤中的屬性，選中當前的標籤。
語法： 1 /*根據屬性查詢*/
2 /*[for]*/
5 
6 /*找到for屬性的等於username的元素 字型顏色設為紅色*/
7 /*[for='username']*/
10 
11 /*以....開頭 ^*/ 
12 /*[for^='user']*/
15 
16 /*以....結尾 $*/
17 /*[for$='vvip']*/
20 
21 /*包含某元素的標籤*/
22 /*[for*="vip"]*/
25 
26 /**/
27 
28 /*指定單詞的屬性*/
29 label[for~='user1']
32 
33 input[type='text']

偽類選擇器一般會用在超連結a標籤

'我們一定要遵循"愛恨準則"  love hate

1

/*沒有被訪問的a標籤的樣式*/2
.box ul li.item1 a:link 6
/*訪問過後的a標籤的樣式*/7
.box ul li.item2 a:visited
11/*
滑鼠懸停時a標籤的樣式
*/12
.box ul li.item3 a:hover
16/*
滑鼠摁住的時候a標籤的樣式
*/17
.box ul li.item4 a:active

再給大家介紹一種css3的選擇器nth-child()

/*

選中第乙個元素
*/div ul li:first-child
/*選中最後乙個元素
*/div ul li:last-child
/*選中當前指定的元素 數值從1開始
*/div ul li:nth-child(3
) 
/*n表示選中所有,這裡面必須是n, 從0開始的 0的時候表示沒有選中
*/div ul li:nth-child(n)
/*偶數
*/div ul li:nth-child(2n)
/*奇數
*/div ul li:nth-child(2n-1
) 
/*隔幾換色 隔行換色
隔4換色 就是5n+1,隔3換色就是4n+1
*/div ul li:nth-child(5n+1
)

廢話不多說，直接上**！！！

/*設定第乙個首字母的樣式*/

p:first-letter
/* 在....之前 新增內容 這個屬性使用不是很頻繁 了解 使用此偽元素選擇器一定要結合content屬性*/
p:before
/*在....之後 新增內容，使用非常頻繁 通常與咱們後面要講到布局 有很大的關聯（清除浮動）*/
p:after
/* 在....之前 新增內容 這個屬性使用不是很頻繁 了解 使用此偽元素選擇器一定要結合content屬性*/
p:before
/*在....之後 新增內容，使用非常頻繁 通常與咱們後面要講到布局 有很大的關聯（清除浮動）*/
p:after{
content:'&';
color: red;
font-size: 40px;

Web 前端 CSS選擇器

選擇器 選擇器類選擇器 類選擇器 三年級時，我還是乙個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。到了三年級下學期時，我們班上了一節公開課，老師提出了乙個很簡單的問題，班裡很多同學都舉手了，甚至成績...

Web前端 CSS選擇器

本文介紹css的選擇器，包括元素選擇器 id選擇器 類選擇器 屬性選擇器 後代選擇器 子元素選擇器 相鄰兄弟選擇器。本文內容結合w3c教程編寫 1 元素選擇器 又稱型別選擇器 type selector 是最常見的css選擇器，文件的元素就是選擇器，比如p h1 甚至html本身。p h12 id選...

前端 關於css選擇器

css選擇器就好像表示式一樣，返回一組或者乙個html元素，後面的樣式宣告塊應用到返回的元素上。所以可以把css選擇器理解為某個或者某一類html元素的抽象的寫法。在講具體的各種選擇器之前要提一下選擇器分組和選擇器組合的不同，選擇器分組是在各個選擇器之間加上逗號操作符，分組執行的是 或 操作，例如h...