爲什麼不能有一些CSS選擇器樣式<input type =「text」>？

例如說我有<input type="text" class="class" id="id">爲什麼不能有一些CSS選擇器樣式<input type =「text」>？

如果我使用style.css的這些選擇，他們不工作：

input {text-align:center;} 
.class {text-align:center;}

但是當我使用這些選擇，他們的工作：

input[type='text'] {text-align:center;} 
input.class {text-align:center;} 
#id {text-align:center;}

這裏是小提琴：http://jsfiddle.net/geoyws/7KRD9/6/

任何人都可以解釋爲什麼嗎？我認爲選擇器是以DOM元素爲目標的。

來源

2014-03-25 geoyws

瞭解特異性http://htmldog.com/guides/css/intermediate/specificity/你會得到答案。 – Era

The [all work]（https://www.evernote.com/shard/s3/sh/177a5fe1-9cd2-4d95-ba60-e082acbf9d90/5496aeab99e36c966ea3ac21fa65a1b2） – Quentin

@ Mr.Alien - 它在技術上並沒有放大，它是我的截圖工具和視網膜顯示器之間的一些奇怪的反應。我應該到處去調查一下。 – Quentin

在你的小提琴中，你已經加載了jQuery UI，它添加了一些CSS。正因爲如此，前兩個選擇器被這個CSS覆蓋，但最後一個選擇器比jQuery UI給出的更具體，所以它們被認爲更重要。

來源

2014-03-25 07:35:20

這是正確的答案。他們現在都能正常工作。 – geoyws

@Geoyws比我寫的是什麼？ *所有的選擇器應該按照他們的方式工作* –

看起來你的問題是CSS specificity。

它基本上是一個將「權重」分配給不同CSS選擇器的系統，以確定將應用哪一個。

例如，#id選擇器比.class選擇器更具體（具有更多權重）。所以，如果你有你的頁面上有兩個選擇，像這樣：

a { text-decoration: none; } 
.mylinks { ... } 
#mylink { text-decoration: underline; }

後者將獲勝，因爲#mylink選擇具有比前者更高的特異性。

如果您希望正確應用您的樣式，請使用更具體的selet。

來源

2014-03-25 07:35:36 Prajjwal

它是因爲規範的CS

Here你可以看到，與「重要」，它將工作。關於這個部分的更多信息是here

/* This doesn't work.*/ 
input { 
    text-align:center; 
    background:lime!Important; 
} 

/* This doesn't work.*/ 
.class { 
    text-align:center; 
    background:red!Important; 
}

來源

2014-03-25 07:35:51 chris

我不明白，爲什麼不與你合作這個簡單的事情？這裏HAVA一起來看看這款

HTML

<input type="text" value="this is demo"/>

CSS

input 
{ 
    text-align:center; 
}

/*這是行不通的。*/

.class { 
    text-align:center; 
    background:red!Important; 
}

這裏是你fiddle

來源

2014-03-25 07:37:44 Abhishek

我一直在用的jsfiddle玩弄，我認爲這是關於CSS具體的計算，這裏是EN文章有關的CSS-招數：css specificity

這更多的是一種互補的以Alien先生的回答。

來源

2014-03-25 07:41:27 alejandroid

爲什麼不能有一些CSS選擇器樣式<input type =「text」>？

回答

相關問題