資訊專欄INFORMATION COLUMN
摘要：，高級選擇器后代選擇器空格表示后代選擇器就是的后代所有的。注意是后代，并不一定是兒子空格可以出現(xiàn)多次補(bǔ)充后代選擇器中出現(xiàn)的東西很靈活，可以是標(biāo)簽，可以是名，可以是名后代選擇器，就是一種平衡共性特性的平衡。
一，選擇器 1，基礎(chǔ)選擇器
1） 標(biāo)簽選擇器：div{ } ，選擇的所有，而不是一個(gè)，用來描述“共性”。
2） 類選擇器：.class名{ }
多個(gè)元素可以同時(shí)屬于某一個(gè)類；
一個(gè)元素可以同時(shí)屬于多個(gè)類選擇器，中間用空格隔開，類名間的順序不重一個(gè)h3
不要去試圖用一個(gè)類名，把某個(gè)元素的所有樣式寫完。這個(gè)元素要多攜帶幾個(gè)類，共同實(shí)現(xiàn)這個(gè)元素的樣式。
每一個(gè)類要盡可能小，有“公共”的概念，能夠讓更多的標(biāo)簽使用。
3）id選擇：#id名{ }
元素的id屬性，一個(gè)元素只能有一個(gè)id，頁面上不允許多個(gè)元素有相同的id。
問：到底用id還是用class？2，高級選擇器
答：盡可能的用class，除非極特殊的情況可以用id。
原因：id是js用的。也就是說，js要通過id屬性得到標(biāo)簽，所以我們css層面盡量不用id，
要不然js就很別扭。另一層面，我們會認(rèn)為一個(gè)有id的元素，有動(dòng)態(tài)效果。
1） 后代選擇器：空格表示后代選擇器
.div1 p 就是.div1的后代所有的p。注意：是后代，并不一定是兒子；空格可以出現(xiàn)多次
補(bǔ)充：后代選擇器中出現(xiàn)的東西很靈活，可以是標(biāo)簽，可以是class名，可以是id名
后代選擇器，就是一種平衡：共性、特性的平衡。當(dāng)要把某一個(gè)部分的所有的什么，進(jìn)行樣式改變，就要想到后代選擇器。
2） 交集選擇器：沒有空格，挨著寫的
h3.special{ color:red; }
選擇的元素是同時(shí)滿足兩個(gè)條件：必須是h3標(biāo)簽，然后必須有special類
交集選擇器，我們一般都是以標(biāo)簽名開頭
3） 并集選擇器：用，號隔開
4） 兒子選擇器：用>號，IE7開始兼容，IE6不兼容。
與后代選擇器區(qū)別：子選擇器作用于第一代后代（即兒子），后代選擇器作用于所有后代。
例子：
.food>li {border:1px solid red;} //兒子選擇器
.food li {border:1px solid red;} //后代選擇器
5） 下一個(gè)兄弟選擇器：用+號，表示選擇下一個(gè)兄弟；IE7開始兼容，IE6不兼容。
例子：h3+p {color: red;}
6） 序選擇器：IE8開始兼容，IE6，7不兼容。
ul li:first-child{ color:red; }//選擇第一個(gè)li
ul li:last-child{ color:red; }//選擇最后一個(gè)li
二、層疊性
1，如果多個(gè)選擇器應(yīng)用到同一個(gè)元素，如何確定元素究竟用哪些樣式呢？
瀏覽器是以層疊方式來確定具體使用哪一樣樣式。即哪一個(gè)選擇器更特定，就運(yùn)用該選擇器對應(yīng)的樣式。
2，層疊性：就是css處理沖突的能力。
3，如何計(jì)算特定性：
4）把上面三位數(shù)組合在一起當(dāng)成真正的數(shù)來讀：比如100 > 010> 001，得到的特定數(shù)越大，這個(gè)規(guī)則就越特定。
4，案例：
例1：
.special2： 010
.special1： 010
css文件中位置越靠后，優(yōu)先級越高。因此顯示.special2的顏色
注：同一個(gè)元素，有多個(gè)類選擇器修飾，屬性描述有沖突，只與在css中類名的先后順序有關(guān)，與在標(biāo)簽中類名的書寫順序無關(guān)。
例2：
#box1 .hezi2 p ： 111
div div #box3 p ： 103
div.hezi1 div.hezi2 div.hezi3 p ： 034
因此顯示red顏色
例3：
注：下圖中前兩個(gè)css規(guī)則不是直接描述p的樣式，因此對于p元素來說，權(quán)重為0。第三個(gè)規(guī)則直接描述p元素，權(quán)重為001。
例4：
css規(guī)則中若沒有直接描述p的規(guī)則，則使用繼承。瀏覽器會查看p元素的祖先，從它的父元素開始，嘗試找到color屬性值。
p元素的父元素為，計(jì)算其權(quán)重，該div顯示red顏色，則p為紅色5，!important： 給一個(gè)屬性提高權(quán)重。這個(gè)屬性的權(quán)重就是無窮大。
1）但在一個(gè)選擇器中，它寫在一個(gè)屬性后面，只是提升的該屬性的權(quán)重，并不會提升選擇器的權(quán)重。
2）而且它無法提升繼承的權(quán)重，該是0還是0。文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113507.html
摘要：在元素中使用元素是一個(gè)元素，沒有結(jié)束標(biāo)記表示鏈入的是樣式表，在中可省略不寫。一般頁面中，中文用宋體黑體微軟雅黑，英文使用。英文字體要放在最前面，中文字體后面的備選字體用逗號隔開。表示方法可用像素指定或使用或百分?jǐn)?shù)相對于字體大小指定。 一、基礎(chǔ)介紹 1， css：cascading style sheet 層疊式樣式表2， 語法：p {background-color:red...
摘要：派生選擇器依據(jù)元素的位置關(guān)系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現(xiàn)在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。 文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) 初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。 內(nèi)容引用：CSS 簡介 樣式解決了什么問題？ HTML...
摘要：派生選擇器依據(jù)元素的位置關(guān)系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現(xiàn)在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。 文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) 初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。 內(nèi)容引用：CSS 簡介 樣式解決了什么問題？ HTML...
摘要：盒模型，盒模型看待元素的一種方式，它將每個(gè)元素看作由一個(gè)盒子表示。盒子實(shí)際占用的大小是左左右右，屬性細(xì)節(jié)一個(gè)塊元素的默認(rèn)寬度是，表示它會自動(dòng)延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對和指定顏色，添加任何裝飾。 盒模型 1，盒模型： CSS看待元素的一種方式，它將每個(gè)元素看作由一個(gè)盒子表示。 2，五個(gè)屬性： 從內(nèi)往外： width:內(nèi)容的寬度，而不是盒子的寬度； hei...
摘要：選擇器和類選擇器區(qū)別標(biāo)準(zhǔn)規(guī)定，在同一個(gè)頁面內(nèi)，不允許有相同名字的對象出現(xiàn)，但是允許相同名字的。選擇器和類選擇器最大的不同在于使用次數(shù)上。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。CSS CSS初識 CSS(Cascading Style Sheets) 美化樣式 CSS通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）...
閱讀 2564·2023-04-26 00:56
閱讀 2013·2021-10-25 09:46
閱讀 1250·2019-10-29 15:13
閱讀 823·2019-08-30 15:54
閱讀 2206·2019-08-29 17:10
閱讀 2628·2019-08-29 15:43
閱讀 507·2019-08-29 15:28
閱讀 3040·2019-08-29 13:24
