XHTML命名空間和CSS屬性選擇器

我無法弄清楚如何獲取CSS屬性選擇器來根據名稱空間屬性對樣式元素進行樣式化，而不需要使用名稱空間屬性（包括冒號）的普通HTML名稱。XHTML命名空間和CSS屬性選擇器

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="https://stackoverflow.com/foo"> 
 
\t <head> 
 
\t \t <title>CSS Attribute Selectors with namespaces</title> 
 
\t \t <style> 
 
\t \t \t @namespace foo "http://www.stackoverflow.com/foo"; 
 
\t \t \t span[foo|id=bar] { font-family: monospace; font-weight: bold; } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <span foo:id="bar">Should be monospace bold</span> 
 
\t </body> 
 
</html>

測試用例：

我打開文件器和Firefox通過鍵入相應的文件：///地址爲我的地址欄;在任何情況下它都顯示正確。它也沒有正確顯示堆棧溢出。

如果我改變代碼段包括HTML屬性名稱：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="https://stackoverflow.com/foo"> 
 
\t <head> 
 
\t \t <title>CSS Attribute Selectors with namespaces</title> 
 
\t \t <style> 
 
\t \t \t @namespace foo "http://www.stackoverflow.com/foo"; 
 
\t \t \t span[foo\:id=bar] { font-family: monospace; font-weight: bold; } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <span foo:id="bar">Should be monospace bold</span> 
 
\t </body> 
 
</html>

...它工作正常（均使用我的本地瀏覽器和堆棧溢出的片段）。

我讀過Can you style XHTML elements in another namespace using id and class name css selectors?和Do CSS namespace attribute selectors work with XHTML/HTML elements?中包含的一組陷阱，但我還沒有弄清楚這一點;我相信我已經完成了這兩個問題的答案。

刪除DOCTYPE並沒有這樣做，雖然我懷疑某種DOCTYPE問題，因爲HTML表單工作和XHTML表單不能。

我必須錯過簡單的東西！

來源

2015-11-18 David P. Caldwell

您的文檔需要作爲XHTML文檔進行處理，才能使XML名稱空間正常工作。請注意，使用XHTML DOCTYPE 和相關的xmlns屬性是不夠的。

您可以通過將文檔作爲Content-Type：application/xhtml + xml提供服務器端，或者在文件系統上使用.xhtml文件擴展名而不是.html保存文檔。對於一個非常快速和骯髒的測試案例，您甚至可以複製整個標記，將其放在地址欄中，前綴爲data:application/xhtml+xml,，然後導航到結果數據URI。

這是非常簡單的路過你鏈接到的第一個問題中提到：

如果我換的MIME類型爲application/xhtml + xml

還要注意命名空間你的CSS必須正好匹配標記中的命名空間。由於www.，@namespace foo "http://www.stackoverflow.com/foo";與xmlns:foo="http://stackoverflow.com/foo"不匹配。（有趣的是，foo標識符不需要匹配，因爲與名稱空間本身不同，標識符是分開的。）

來源

2015-11-18 14:24:06 BoltClock

優秀，我會修復命名空間中的拼寫錯誤（顯然，我的快速 - 髒 - 複製 - 粘貼 - 修改從我的真實項目中引入了迴歸），然後我會在瀏覽器上嘗試其餘的部分。 –

將文件重命名爲.xhtml。我也嘗試了一個meta http-equiv來設置內容類型（不重命名文件）;那不*做*。 –

@DavidP。Caldwell沒錯，在'

XHTML命名空間和CSS屬性選擇器

回答

相關問題