成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 1-選擇器

yhaolpz / 3263人閱讀

摘要：當(dāng)兩個(gè)規(guī)則的權(quán)值相同時(shí)，誰(shuí)更具體用誰(shuí)，也就是權(quán)值高的選擇器作用的越具體優(yōu)先級(jí)越高。

CSS選擇器

1.id選擇器 #id{ } ,“#id”選中元素
2.類選擇器 .class{ } ,“.類名稱”選中元素
3.標(biāo)簽選擇器 div{ } ,“標(biāo)簽名”選中元素
4.通配符選擇器 { } ,""選中所有元素
5.組合選擇器：
分組選擇器 E,F “，”逗號(hào)隔開，同時(shí)選中E,F元素
后代選擇器 E F 空格隔開，選中E元素下的所有F元素（無(wú)論F元素嵌套多少層一樣會(huì)被選中）
直接子選擇器 E > F “>”隔開，選中E元素下的直接子元素F，即E元素下的第一層級(jí)子元素F
相鄰兄弟選擇器 E + F, “+”隔開選中E元素后的直接相鄰元素F
通用相鄰選擇器 E ~ F, “~”隔開選中E元素后面的所有同級(jí)元素F
6.偽類選擇器L-V-H-A,:link,:visited,:hover,:active
7.偽元素選擇器
E::first-line 選中E元素內(nèi)容的第一行
E::first-letter 選中E元素內(nèi)容的第一個(gè)字母
E::before 在E元素之前插入conten內(nèi)容
E::after 在E元素之后插入content內(nèi)容
before和after是可以插入額外內(nèi)容的位置，需要配合content屬性使用
8.屬性選擇器
input[type="text"] {
width:150px;
}

選擇器的優(yōu)先級(jí)

css選擇器優(yōu)先級(jí)核心：每個(gè)選擇器本身有優(yōu)先級(jí)，作用范圍越具體優(yōu)先級(jí)越高。
CSS優(yōu)先級(jí)從高到低分別是：
1.在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
2.作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義
當(dāng)CSS樣式的規(guī)則由多個(gè)選擇器組成時(shí)，id選擇器的權(quán)值為1000，class選擇器為100，標(biāo)簽選擇器為10，按權(quán)值求和的記過高低決定哪個(gè)優(yōu)先。當(dāng)兩個(gè)css規(guī)則的權(quán)值相同時(shí)，誰(shuí)更具體用誰(shuí)，也就是權(quán)值高的選擇器作用的越具體優(yōu)先級(jí)越高。當(dāng)兩個(gè)選擇器規(guī)則和權(quán)值都是一樣，后面樣式會(huì)覆蓋前面的！
div {color: #333;}
div {color: #666;}
這樣div文案的顏色明顯會(huì)是#666

class 和 id 的使用場(chǎng)景

id在頁(yè)面上是唯一標(biāo)識(shí)，class在頁(yè)面上標(biāo)識(shí)某一類型的樣式，具有普遍性，可以重復(fù)使用。某元素的class名可以寫成class="intro other"，即可以有多個(gè)class名，代表疊加兩個(gè)類名稱對(duì)應(yīng)的樣式。id名不能這樣寫。ID名常用在頁(yè)面布局（標(biāo)記大框架），class一般在局部頁(yè)面布局中使用，用于樣式定義，因?yàn)槊麜r(shí)可將class名稱寫成一樣，所以只需要對(duì)該class寫一次樣式，就能讓有相同樣式的元素復(fù)用。使用CSS選擇器時(shí)劃定適當(dāng)?shù)拿臻g,提高代碼可讀性，便于維護(hù)

選擇器使用示例 
html
#header{} /*選中id為header的元素*/
.header{}    /*選中class=header的元素*/ 
.header .logo{}  /*選中class=header下的所有class=logo的元素*/ 
.header.mobile{}  /*選中class="header mobile"的元素*/ 
.header p, .header h3{}  /*選中class=header元素下的所有p元素，同時(shí)選中class=header元素下的所有h3元素*/ 
#header .nav>li{}  /*選中id=header元素下的所有class=nav元素的直接子元素li*/ 
#header a:hover{}  /*選中id=header元素下的所有a元素，并使用hover偽類*/
常見偽類選擇器

【1】結(jié)構(gòu)偽類選擇器
E:first-child 選中E所在父元素下的第一個(gè)子元素，且該子元素是E元素
E:last-child 選中E所在父元素下的最后一個(gè)子元素，且該子元素是E元素
E:root 選中E所在根節(jié)點(diǎn)的元素，對(duì)于HTML即選中HTML元素
E:nth-child(n) 選中E所在父元素下的第n個(gè)子元素，且該子元素是E元素
E:nth-last-child(n) 選中E所在父元素下的倒數(shù)第n個(gè)子元素，且該子元素是E元素
E:nth-of-type(n) 選中E所在父元素下的同類型元素中的第n個(gè)E元素
E:nth-last-of-type(n) 選中E所在父元素下的同類型元素中的倒數(shù)第n個(gè)E個(gè)元素
E:first-of-type 選中E所在父元素下的同類型元素中的第一個(gè)E元素
E:last-of-type 選中E所在父元素下的同類型元素中的最后一個(gè)E元素
E:only-child匹配父元素內(nèi)僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty匹配沒有子元素的元素，且該元素?zé)o任何文本節(jié)點(diǎn)
E:not(F) 匹配不符合當(dāng)前選擇器的任何元素
【2】動(dòng)態(tài)偽類選擇器 順序L-V-H-A
link-visited-hover-active

a:link{
 color:red;
 }
 
 a:visited{
 color:blue;
 }
 
 a:hover{
 color:gree;
 font-size:20px;
 }
 
 a:active{
 color:gold;
 }

 a:focus{
 color:gold; //a元素獲得焦點(diǎn)后的樣式
 }
:first-child和:first-of-type的作用和區(qū)別

E:first-child 指定元素E，找其父元素下的第一個(gè)E元素
E：first-of-type 指定E類型的元素，找其父元素下的E類型元素的第一個(gè)

代碼示例：

html
 

 

aa


bb


ccc

.item1:first-child{color:red;}class=item1元素的父元素div下的第一個(gè)子元素item1字體紅色

bb

,

ccc

雖然class=item1但他們不是其父元素下的第一個(gè)子元素。

.item1:first-of-type{background:blue;}class=item1元素的父元素下的同類型元素中的第一個(gè)class=item1的元素。

aa

的父元素div下的同類型元素（p,h3）分別選中第一個(gè)即aa,bb加藍(lán)色背景。

text-align: center的作用

設(shè)置元素內(nèi)的文本水平居中對(duì)齊。text-align應(yīng)用在塊級(jí)元素上（div或p），對(duì)該塊級(jí)元素（div/p）其內(nèi)部的行內(nèi)元素（文字、圖片、input框）可設(shè)置對(duì)齊方式。
text-align有5個(gè)值：left/right/center/justify/inherit，左對(duì)齊/右對(duì)齊/居中對(duì)齊/兩端對(duì)齊/繼承父元素align值。justify兩端對(duì)齊的時(shí)候，每行中的字間距可能不一致。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113353.html

相關(guān)文章

  • HTML/CSS初步了解

    摘要：為標(biāo)記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式。選擇器指明了中的樣式的作用對(duì)象，也就是樣式作用于網(wǎng)頁(yè)中的哪些元素基本語(yǔ)法第一種選擇器叫選擇器在里面寫一個(gè)，通過這個(gè)就能找到這個(gè)。一、CSS是什么？ 　　它是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS為HTML標(biāo)記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式。...

    miracledan 評(píng)論0 收藏0

  • WEB前端 CSS

    摘要：后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器。后代選擇器后代選擇器標(biāo)簽選擇器后跟標(biāo)簽后代，無(wú)論直屬還是間接直屬，直接后代毗鄰后代中最近的一個(gè)弟弟，找到和自己同級(jí)的標(biāo)簽如通過多個(gè)選擇器好到具體的標(biāo)簽。目錄 WEB前端 CSS WEB前端 CSS TOC CSS簡(jiǎn)介 CSS引入方式 CSS結(jié)構(gòu) CSS選擇器 標(biāo)簽選擇...

    darry 評(píng)論0 收藏0

  • CSS札記（一）：CSS選擇器

    一、語(yǔ)法規(guī)則 選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/ 二、如何在html中應(yīng)用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夾和HTML位于同一個(gè)目錄下） 2. 內(nèi)部嵌入css /*css代碼*/ 3...

    yzzz 評(píng)論0 收藏0

  • CSS札記（一）：CSS選擇器

    一、語(yǔ)法規(guī)則 選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/ 二、如何在html中應(yīng)用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夾和HTML位于同一個(gè)目錄下） 2. 內(nèi)部嵌入css /*css代碼*/ 3...

    孫淑建 評(píng)論0 收藏0

  • CSS 樣式優(yōu)先級(jí)

    摘要：下面我們從這兩方面去看看樣式的優(yōu)先級(jí)。影響的規(guī)則是優(yōu)先規(guī)則最近的祖先樣式比其他祖先樣式優(yōu)先級(jí)高。若同時(shí)插有，則再利用規(guī)則判斷優(yōu)先級(jí)。 CSS 樣式優(yōu)先級(jí) 當(dāng)創(chuàng)建的樣式表越來(lái)越復(fù)雜時(shí)，一個(gè)標(biāo)簽的樣式將會(huì)受到越來(lái)越多的影響，這種影響可能來(lái)自周圍的標(biāo)簽，也可能來(lái)自其自身。下面我們從這兩方面去看看 CSS 樣式的優(yōu)先級(jí)。 CSS 的繼承性 CSS 的繼承特性指的是應(yīng)用在一個(gè)標(biāo)簽上的那些 CSS...

    王晗 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<