2017-07-26 42 views
5

我與僞元素的風格演奏和跨困惑我僞元素的樣式優先

考慮下面的CSS和HTML

HTML行爲傳來:

<p> 
     Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the sake of compatibility. Note that ::selection must always start with double colons ::. 
    </p> 

和風格

p::first-letter { 
    font-size: 20px; 
    color: red; 
} 

p::first-line { 
    font-variant: small-caps; 
    color: green; 
} 

p::before { 
    content: 'Start'; 
    color: blue; 
} 

在Chrome中,行爲如下:第一個字母:: before conten即使它不包含p和::之前的樣式不會將顏色覆蓋爲藍色,t也會顯示爲紅色。 enter image description here

而且當存在::不信的內容之前,我把&或*有 - 所有一線變成綠色,並沒有應用::第一個字母和::風格之前。

在Firefox中提供的代碼的結果將是以下幾點: enter image description here

我使用Ubuntu 17.04在最新版本的瀏覽器,爲什麼::由其他選擇的內容之前

所以任何人都可以解釋僞元素選擇器和應用的樣式,以及爲什麼own :: before樣式不會覆蓋它們,即使它們是「更新」的樣式。

+0

的特異性,所有的選擇是2,所以我想說的最後一個獲勝。但它不 –

+0

不,我的第一個字母是紅色的,而不是藍色的 –

+0

啊道歉,誤讀你的帖子哈哈會刪除我的意見:) – ThisGuyHasTwoThumbs

回答

3

至於第一行和第一個字母,這不是真正的特異性問題。它只是指定這樣的:

與常規元素的含量, ::之前生成的內容:after僞元素可以包含在任何 ::一線和一線::字母僞元素應用於其原始元素。

source

+0

謝謝,這確實解釋了爲什麼應用:: first-line和:: first-letter的樣式。但爲什麼最後一個(這是::之前)不贏? –

+0

@OlenaHoral我不確定這件事。看起來你在設計僞元素時有很多不確定的(或者至少不清楚)行爲,因爲它們本身就是作爲規則結果存在的。 –

+0

@OlenaHoral在任何情況下都不要接受我的回答,您的問題應該得到更好的回答。 –