MozTW 討論區
https://forum.moztw.org/

請問一個有關選擇 CSS Selectors 的問題
https://forum.moztw.org/viewtopic.php?f=13&t=21490		 第 1 頁 (共 2 頁)
發表人:  過路的 [ 2008-01-20, 00:38 ]
文章主題 :  請問一個有關選擇 CSS Selectors 的問題
我原本想把這網頁中的「10天、30天、60天」、「90天、120天、180天」分別用藍色與紅色來顯示，其它不變，所以我就以下面這段 code 來操作，顏色是變了，不過不該變的地方也變色了。

代碼:
table>tbody>tr+tr+tr+tr>td>table>tbody>tr+tr>td  {
color: blue !important;
}

table>tbody>tr+tr+tr+tr>td>table>tbody>tr+tr>td+td+td+td  {
color: red !important;
}


我想請問應該怎麼訂才能不波及目標以外的其它部份？謝謝 :lol:
發表人:  wini [ 2008-01-20, 02:47 ]
文章主題 : 
只是要原本淡綠色的地方變色的話，針對「淡綠色」的特性下手就好。

先用滑鼠左鍵選取那六格儲存格，按滑鼠右鍵，開選取區原始碼來看。

代碼:
<tr bgcolor="#caf4d8">
              <td class="tbLine" nowrap="nowrap" width="10%">
                <div align="center">10天</div></td>
              <td class="tbLine" nowrap="nowrap" width="10%">
                <div align="center">30天</div></td>
              <td class="tbLine" nowrap="nowrap" width="10%">
                <div align="center">60天</div></td>
              <td class="tbLine" nowrap="nowrap" width="10%">
                <div align="center">90天</div></td>

              <td class="tbLine" nowrap="nowrap" width="10%">
                <div align="center">120天</div></td>
              <td class="tbLine" nowrap="nowrap" width="10%">
                <div align="center">180天</div></td>
            </tr>


這裡可以查出「 tr bgcolor="#caf4d8" 」跟「 td class="tbLine" 」這兩個選擇子要用的資料。

所以寫成「 tr[bgcolor="#caf4d8"] td.tbLine 」指定好前三格的顏色，再用「 td+td+td+td 」的方法處理後三格的應該就可以了。


不過如果你是要那些儲存格下的「每一行」都變色，那就要開 DOM 觀察器了，因為 table 排版都是好幾層 table 的，所以一定要想辦法確認是第幾層的 table 。

總之廢話不多說，下面這樣應該可以符合這需求。

代碼:
table.text tr+tr+tr td+td+td+td+td {
  background:blue !important
  }

table.text tr+tr+tr td+td+td+td+td+td+td+td {
  background:red !important
  }


----
說到選擇子，有人能教我一下『 E[foo~="warning"] 』跟『 E[lang|="en"] 』怎麼使用嗎？我總覺得跟『 E[att="val"] 」沒差別……
發表人:  訪客 [ 2008-01-20, 11:19 ]
文章主題 : 
原來如此，多謝 wini 兄，有了你的幫忙，問題已解決了，多謝了 :D

PS：不好意思，我現在沒法用原帳號登入來回覆了，不過該做的還是要先做。
發表人:  Amauds [ 2008-01-20, 19:27 ]
文章主題 : 
wini 寫:
說到選擇子，有人能教我一下『 E[foo~="warning"] 』跟『 E[lang|="en"] 』怎麼使用嗎？我總覺得跟『 E[att="val"] 」沒差別……

CSS 自定連結圖像
發表人:  wini [ 2008-01-20, 20:35 ]
文章主題 : 
Amauds 寫:
wini 寫:
說到選擇子，有人能教我一下『 E[foo~="warning"] 』跟『 E[lang|="en"] 』怎麼使用嗎？我總覺得跟『 E[att="val"] 」沒差別……

CSS 自定連結圖像


感謝，你幫了我個大忙。 :)

（不過這樣子一看，「 |= 」就是指用「 - 」分隔的文字了嗎……）
發表人:  不惑仔Boohover [ 2008-01-21, 22:37 ]
文章主題 : 
wini 寫:
（不過這樣子一看，「 |= 」就是指用「 - 」分隔的文字了嗎……）


W3C Attribute selectors
引言回覆:
Match when the element's "att" attribute value is a hyphen-separated list of "words", beginning with "val". The match always starts at the beginning of the attribute value....
發表人:  wini [ 2008-01-22, 00:13 ]
文章主題 : 
不惑仔Boohover 寫:
wini 寫:
（不過這樣子一看，「 |= 」就是指用「 - 」分隔的文字了嗎……）


W3C Attribute selectors


其實 W3C 這頁我已經看過了，我還跑去找看看有沒有人弄出中文說明，不過都沒有像上面 Amauds 舉出的那些例子清楚易懂就是，只可惜沒講到「 |= 」的說明。
發表人:  過路的 [ 2008-01-22, 16:23 ]
文章主題 : 
真的好清楚，連小弟這種初學者都能完全了解，如 wini 兄所言，真要感謝 Amauds 兄的說明。

PS：W3C 那頁說明對於小弟來說是難以理解的（不知其他人初學感覺如何），以小弟來說，就只有問人及透過 Google 來找現成的，不過也是漏東漏西。

我自己找到的大多都是 CSS 語法使用方面：
CSS(Cascading Style Sheet) Note
CSS 語法教學
display 語法
CSS常用屬性(Properties)與設定值一覽表

至於關於 W3C 說明 Selectors 的資料，也許是小弟眼拙，真沒找到像 Amauds 兄那樣精聞的資料。
發表人:  不惑仔Boohover [ 2008-01-22, 21:06 ]
文章主題 : 
CSS3 selectors at W3C

下面都有清楚的例子，不過還沒試 ie7 是否有支援 CSS3 的表示法就是了。
發表人:  過路的 [ 2008-02-14, 00:05 ]
文章主題 : 
不惑仔Boohover 寫:
CSS3 selectors at W3C

下面都有清楚的例子，不過還沒試 ie7 是否有支援 CSS3 的表示法就是了。

多謝 不惑仔Boohover 兄的提供，小弟再研究研究。

想再請教各位兩個問題：

1. 是關於 ID selectors 的，因為我最近拿無名相簿做實驗，發現其中廣告元素用的 ID 都是類似的，如：
td#ad_button
td#ad_word

不知有無通用法則可以利用？就像 Attribute selector 有 ^、$、~…之類的，把 ID 同樣是 ad_ 開頭的元素都抓出來 。

PS：這兩邊都找不到有可用的方法：
http://www.w3.org/TR/CSS21/selector.htm ... n-matching
http://www.w3.org/TR/css3-selectors/#selectors


2. 關於【-moz-column-count】這個功能，它使用的對象是不是只有 CSS,並不適用 HTML 的 Table？如果我想對一個只用Table、tr、td 為架構的表格，以 Stylish 將其做改變，就像【-moz-column-count】那樣，請問有可能實現嗎？
發表人:  coolcd [ 2008-02-14, 01:27 ]
文章主題 : 
  1. 用 CSS 3 的 selector
    代碼:
    * [id^=ad] {display:none;}
  2. 看不太懂你要問什麼，附上兩個例子
    代碼:
    @-moz-document url-prefix(http://en.wikipedia.org/wiki/) {
    #bodyContent > p {
    -moz-column-count:2;
    }


    代碼:
    @-moz-document domain(forum.moztw.org) {
    .postbody {-moz-column-count:2}
    }
發表人:  過路的 [ 2008-02-14, 18:30 ]
文章主題 : 
多謝 coolcd 兄的回應，我把實例貼上來好了：

問題一、請看這邊

我是用 【檢視原始碼】+ FireBug 來抓目標的，因為該頁中有三個 id 以 ad_ 為開頭的元素：table id="ad_square"、td id="ad_button"、td id="ad_word"，所以我把開頭改由 * 改 td，以免抓到 table 這一項：

td[id^="ad_"]

不過這麼做反而什麼都沒抓到，所以我嘗試先對單一元素做測試，發現以：

td#ad_button 或 td#ad_word

都抓不到（在網頁中明明都是獨一無二的 id，但就是抓不到），只能以：

td#ad_button:first-child 或 td#ad_word:first-child

來抓取，不過因為它們的所在位置都只有一個 td，所以不論是 first-child 或 last-child 都能抓到，但不加就一定抓不到，這是何原故？我想應該是和這部份有關係吧？


問題二、就拿我在這頁最初的問題所參考的網址來說，它的表格架構是用 table、tr、td 所組成的，而 userstyles.org 則是用 ul、li 所組成的，我想問的就是 -moz-column-count 可以作用的對象是兩者皆可？還是只適用於 ul、li？

若 -moz-column-count 只適用後者的話，純以 table、tr、td 構成的表格能透過 stylish 做調整，達到如同 -moz-column-count 的效果嗎？就是任意將原有的行數做增減。
發表人:  coolcd [ 2008-02-14, 21:53 ]
文章主題 : 
第一個問題，應該還是有抓到，只是優先權不足，因為我設了 !important 後就可以擋掉了。至於為什麼優先權不足，我也不瞭解，CSS 看似簡單，其實是很不簡單的。 ^^

第二個問題，我實際去試著將「直接在 <td></td> 內的文字」弄成 2 個 columns，並沒有成功。但如果文字先用 <p></p> 包住就沒問題。MDC 上關於 -moz-column-count 的資料也沒有寫清楚它是對誰有作用，只寫說是針對 block-level elements，可是 td 不也是 block-level element 嗎？我猜有可能是人家認為「在正確使用表格元素的狀態下，不需要用到多欄配置」吧～

你問說可不可以用 stylish 調整表格中各欄的寬度，我是覺得很難啦～
之前網友有問過關於表格寬度的問題，有試過的應該會覺得表格寬度真的是很難纏... !@#%
發表人:  過路的 [ 2008-02-15, 01:33 ]
文章主題 : 
多謝 coolcd 兄的幫忙，問題大概是找出來了，有兩點：

1.可能是因為 coolcd 兄所說的優先權問題，導致我以：

td[id^="ad_"]

為條件時，Stylish 的預覽不能即時顯示；以往我都是用預覽來檢查是改變後的結果，但這次的情況很特別，預覽完全沒有顯示改變後的畫面，得重新載入頁面才能看到改變後的結果。

2.因為我在其前方加入：

td[align="right"] > font.small-c

這是用來遮蔽人氣計數器的條件，以致於 td[id^="ad_"]失效 ，我萬萬沒想到這也會影響，而當 td[id^="ad_"] 在前面時，遮蔽人氣計數器的條件也會失效。


因這兩個問題組合在一起，導致我一直找不出原因，多虧 coolcd 兄的熱心幫忙，這次真是學到很多，非常感謝 coolcd 兄。

PS：至於問題二，我就不繼續花時間在這上面了，其實想想也是，用 Google 找到的都是如何直接用 CSS 去代替 Table，或者合併使用，就沒找到轉換的資料，因為沒有必要，CSS 設計出來就是給網頁設計者使用，要修改就直接到源頭做就行了，自然沒必要兜圈子弄轉換的動作。
發表人:  coolcd [ 2008-02-15, 10:47 ]
文章主題 : 
過路的 寫:
1.可能是因為 coolcd 兄所說的優先權問題，導致我以：

td[id^="ad_"]

為條件時，Stylish 的預覽不能即時顯示；以往我都是用預覽來檢查是改變後的結果，但這次的情況很特別，預覽完全沒有顯示改變後的畫面，得重新載入頁面才能看到改變後的結果。

不知道是不是平台的差異，只要有加 !important，我這邊按 preview 是直接擋掉的，但如果沒加 !important，按 preview 就不會擋掉。在尚未加入 !important 測試前，如果撰寫的規則擋不掉廣告，我並不知道是自己規則寫法有問題，還是其實 selector 有抓到我要擋的東西，只是明確性不足，所以沒有作用，我想... 去建議 stylish 的作者加強這方面辨識 selector 所抓到的東西的功能... 應該不錯。

過路的 寫:
2.因為我在其前方加入：

td[align="right"] > font.small-c

這是用來遮蔽人氣計數器的條件，以致於 td[id^="ad_"]失效 ，我萬萬沒想到這也會影響，而當 td[id^="ad_"] 在前面時，遮蔽人氣計數器的條件也會失效。

你那兩條規則在這個網頁應該不會互相影響吧？我先前說的優先權不同，其實是指跟網站自己的 CSS 相比，其實應該說「明確性」(specificity)，之前講優先權是想說讓人比較好理解，不過好像反而造成誤解。 Orz

我後來有找出原因了，以 ad_banner 為例，原來網站自己的 CSS (font.css) 有這一段：
代碼:
114 html body table tbody tr td#ad_banner,
115 html body table tbody tr td#ad_banner a,
116 html body table tbody tr td#ad_banner a img,
117 html body table tbody tr td#ad_banner iframe,
118 html body table tbody tr td#ad_banner object,
119 html body table tbody tr td#ad_banner object embed
120 {clip:rect(auto, auto, auto, auto) !important;
121 display:inline !important;
122 height:90px !important;
123 width:700px !important;
124 opacity:1 !important;
125 filter: alpha(opacity=100) !important;
126 position:static !important;
127 visibility:visible !important;}

所以當我們只用 td[id^=ad_] 時，明確性當然不如 html body table tbody tr td#ad_banner，更何況人家的 CSS 規則還有加 !important。所以我們也要把我們的規則加上 !important，我們的規則才會生效。

記得之前有做過簡單的測試，在 selector 都相同的狀況下，有沒有加上 !important 的 CSS 規則優先程度是：

stylish !important > 網頁的 !important > stylish 不加 !important > 網頁不加 !important
第 1 頁 (共 2 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/