色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css為什么沒有內(nèi)容選擇器,css層次選擇器有哪些

老白2年前26瀏覽0評論

css為什么沒有內(nèi)容選擇器,css層次選擇器有哪些?

選擇器body > div 只操作body下級的div。div1 + div2 只選擇div1 同級 隨后 相鄰最近 的div2div1 ~ p 選擇div1下所有的p屬性選擇器

css為什么沒有內(nèi)容選擇器,css層次選擇器有哪些

如何在js文件中動態(tài)加載另一個js文件?

就像正常的下載文件一樣。把服務(wù)的js文件下載下來,然后在本地瀏覽器執(zhí)行。

另外你需要補(bǔ)充一下瀏覽器加載、解析、渲染的一些知識。復(fù)制一下我之前整理的筆記。

瀏覽器加載

加載過程 當(dāng)瀏覽器獲得一個html文件時,會”自上而下“加載,并在加載過程中進(jìn)行解析渲染。 加載過程中遇到外部CSS文件,瀏覽器另外發(fā)出一個請求,來獲取css文件。 遇到圖片資源,瀏覽器也會另外發(fā)出一個請求,來獲取圖片資源。這是異步請求,并不會影響html文檔進(jìn)行加載。 但是當(dāng)文檔加載過程中遇到j(luò)s文件,html文檔會掛起渲染(加載解析渲染同步)的線程,不僅要等待文檔中js文件加載完畢,還要等待解析執(zhí)行完畢,才可以恢復(fù)html文檔的渲染線程。加載外聯(lián)js和css的阻塞情況

一個不太嚴(yán)謹(jǐn)?shù)奖阌洃浀目谠E:JS 全阻塞,CSS 半阻塞

JS 會阻塞后續(xù) DOM 解析以及其它資源(如 CSS,JS 或圖片資源)的加載。CSS不阻塞DOM的加載和解析(它只阻塞DOM的渲染呈現(xiàn)。這里談加載),不會阻塞其它資源(如圖片)的加載,但是會阻塞 后續(xù)JS 文件的執(zhí)行(原因之一是,js執(zhí)行代碼可能會依賴到css樣式。css只阻塞執(zhí)行而不阻塞js的加載)。鑒于上面的特性,當(dāng)css后面存在js的時候,css會間接地阻塞js后面資源的加載(css阻塞js,js阻塞其他資源 )。現(xiàn)代瀏覽器會進(jìn)行 prefetch 優(yōu)化,瀏覽器在獲得 html 文檔之后會對頁面上引用的資源進(jìn)行提前下載

外聯(lián)js文件使用defer屬性和asyn可以達(dá)到異步非阻塞加載的效果,由于現(xiàn)代瀏覽器都存在 prefetch,所以 defer, async 可能并沒有太多的用途,可以作為了解擴(kuò)展知識,僅僅將腳本文件放到 body 底部(但還是在之前)就可以起到很不錯的優(yōu)化效果(遵循先解析再渲染再執(zhí)行script這個順序)。當(dāng)把js放在最后的時候,其實(shí)瀏覽器將自動忽略標(biāo)簽,從而自動在最后的最后補(bǔ)上。

瀏覽器解析

1、瀏覽器通過請求的 URL 進(jìn)行域名解析,向服務(wù)器發(fā)起請求,接收文件(HTML、CSS、JS、Images等等)。2、HTML 文件加載后,開始構(gòu)建 DOM Tree(DOM樹)3、CSS 樣式文件加載后,開始解析和構(gòu)建 CSS Rule Tree4、Javascript 腳本文件加載后, 通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree

瀏覽器渲染

1、瀏覽器引擎通過 DOM Tree 和 CSS Rule Tree 構(gòu)建 Rendering Tree(渲染樹)2、布局階段——在屏幕上繪制渲染樹中的所有節(jié)點(diǎn)的幾何屬性,比如: 位置,寬高,大小等等,這個過程稱為 Flow 或 Layout 。3、繪制元素——繪制所有節(jié)點(diǎn)的可視屬性。4、合并渲染層——把以上繪制的所有圖層(類似于PhotoShop中的“圖層”)合并,最終輸出一張圖片

其中的階段3、4可稱之為Paint

Repaint和Reflow

當(dāng)用戶在瀏覽網(wǎng)頁時進(jìn)行交互或通過 js 腳本改變頁面結(jié)構(gòu)時,以上的部分操作有可能重復(fù)運(yùn)行,此過程稱為 Repaint 或 Reflow。

Repaint

當(dāng)元素改變的時候,將不會影響元素在頁面當(dāng)中的位置(比如 background-color, border-color, visibility),瀏覽器僅僅會應(yīng)用新的樣式重繪此元素,此過程稱為 Repaint。

Reflow

當(dāng)元素改變的時候,將會影響文檔內(nèi)容或結(jié)構(gòu),或元素位置,此過程稱為 Reflow。( HTML 使用的是 flow based layout ,也就是流式布局,所以,如果某元件的幾何尺寸發(fā)生了變化,需要重新布局,也就叫 Reflow。)

Reflow 的成本比 Repaint 的成本高得多的多。我們應(yīng)當(dāng)盡量避免Reflow。

如何優(yōu)化瀏覽器渲染過程

1、創(chuàng)建有效的 HTML 和 CSS ,不要忘記指定文檔編碼,比如。2、CSS 樣式應(yīng)該包含在 中, Javascript 腳本出現(xiàn)在末尾。3、減少 CSS 嵌套層級和選擇適當(dāng)?shù)倪x擇器,可參考 如何提升 CSS 選擇器性能。4、不要通過 JS 逐條修改 DOM 的樣式,提前定義好 CSS 的 Class 進(jìn)行操作。5、盡量減少將 DOM 節(jié)點(diǎn)屬性值放在循環(huán)當(dāng)中,會導(dǎo)致大量讀寫此屬性值。6、盡可能的為產(chǎn)生動畫的 HTML 元素使用 fixed 或 absolute 的 position ,那么修改他們的 CSS 是不會 Reflow 的。

css復(fù)合選擇器有哪三種?

1、元素選擇器 標(biāo)簽名{ }

2、id選擇器 #id屬性值{ }

3、類選擇器 .class屬性值{ }

4、選擇器分組(并集選擇器)

作用:通過它可以同時選中多個選擇器對應(yīng)的元素(通常用于集體聲明)

語法:選擇器1,選擇器2,選擇器n{ }

5、復(fù)合選擇器(交集選擇器)

作用:選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素并為其設(shè)置屬性

語法:選擇器1選擇器2選擇器n{ }

!注意選擇器之間不能有空格,要緊挨在一起

6、通配選擇器

作用:用來選中頁面中所有的元素

語法:*{ }

7、后代元素選擇器

作用:選中指定元素的指定后代元素

語法:祖先元素 后代元素{ }

8、子元素選擇器

作用:選中指定父元素的子元素

語法:父元素>子元素

9、偽類選擇器

偽類表示元素的一種特殊狀態(tài)

:hover 移入時元素的狀態(tài)

:visited 已被訪問過后的元素的狀態(tài)

:active 被點(diǎn)擊時元素的狀態(tài)

10、 屬性選擇器

作用:根據(jù)元素中的屬性或?qū)傩灾祦磉x取指定元素

語法:[屬性名]選取含有指定屬性的元素

? [屬性名=“屬性值”]選取含指定屬性值的元素

? [屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開頭的元素

? [屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素

? [屬性名*="屬性值"] 選取屬性值包含指定內(nèi)容的元素

11、兄弟元素選擇器

+選擇器

作用:選中一個元素后緊挨著的指定的兄弟元素

語法:前一個+后一個(作用在后一個)

~選擇器

作用:選中后邊所有的制定兄弟元素

語法:前一個~后邊所有

css選擇器識別范圍?

css選擇器優(yōu)先級核心:每個選擇器本身有優(yōu)先級,作用范圍越具體優(yōu)先級越高。

CSS優(yōu)先級從高到低分別是:

1.在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式。

2.作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式

3.id選擇器

4.類選擇器

5.偽類選擇器

6.屬性選擇器

7.標(biāo)簽選擇器

8.通配符選擇器

9.瀏覽器選擇器

當(dāng)CSS樣式的規(guī)則由多個選擇器組成時,id選擇器的權(quán)值為1000,class選擇器為100,標(biāo)簽選擇器為10,按權(quán)值求和的記過高低決定哪個優(yōu)先。當(dāng)兩個css規(guī)則的權(quán)值相同時,誰更具體用誰,也就是權(quán)值高的選擇器作用的越具體優(yōu)先級越高。當(dāng)兩個選擇器規(guī)則和權(quán)值都是一樣,后面樣式會覆蓋前面的!