MozTW 討論區 • 檢視主題 - 請問一個有關選擇 CSS Selectors 的問題

檢視沒有回覆的主題 | 檢視最近討論的主題

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時

請問一個有關選擇 CSS Selectors 的問題

第 1 頁 (共 2 頁)

[ 17 篇文章 ]

前往頁數 1，2 下一頁

列印模式	上一個主題 \| 下一個主題

發表人

內容

過路的

文章主題 : 請問一個有關選擇 CSS Selectors 的問題

發表於 : 2008-01-20, 00:38

註冊時間: 2005-06-27, 15:59
文章: 466
來自: Republic of China ( R.O.C. )

我原本想把這網頁中的「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:

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.9) Gecko/20071112 BonEcho/2.0.0.9 (tete009 SSE PGO)

wini

文章主題 :

發表於 : 2008-01-20, 02:47

[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220

只是要原本淡綠色的地方變色的話，針對「淡綠色」的特性下手就好。

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

代碼:

<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"] 」沒差別……

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
（本帳號停用中）

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.11) Gecko/20071201 Firefox/2.0.0.11 (pigfoot)

訪客

文章主題 :

發表於 : 2008-01-20, 11:19

原來如此，多謝 wini 兄，有了你的幫忙，問題已解決了，多謝了

PS：不好意思，我現在沒法用原帳號登入來回覆了，不過該做的還是要先做。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.9) Gecko/20071112 BonEcho/2.0.0.9 (tete009 SSE PGO)

Amauds

文章主題 :

發表於 : 2008-01-20, 19:27

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan

wini 寫:

說到選擇子，有人能教我一下『 E[foo~="warning"] 』跟『 E[lang|="en"] 』怎麼使用嗎？我總覺得跟『 E[att="val"] 」沒差別……

CSS 自定連結圖像

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴；其實從未曾真實的存在過。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

wini

文章主題 :

發表於 : 2008-01-20, 20:35

[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220

Amauds 寫:

wini 寫:

說到選擇子，有人能教我一下『 E[foo~="warning"] 』跟『 E[lang|="en"] 』怎麼使用嗎？我總覺得跟『 E[att="val"] 」沒差別……

CSS 自定連結圖像

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

（不過這樣子一看，「 |= 」就是指用「 - 」分隔的文字了嗎……）

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.11) Gecko/20071201 Firefox/2.0.0.11 (pigfoot)

不惑仔Boohover

文章主題 :

發表於 : 2008-01-21, 22:37

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩

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....

_________________
時間，人為與自然的衝突。~不惑仔

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

wini

文章主題 :

發表於 : 2008-01-22, 00:13

[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220

不惑仔Boohover 寫:

wini 寫:

（不過這樣子一看，「 |= 」就是指用「 - 」分隔的文字了嗎……）

W3C Attribute selectors

其實 W3C 這頁我已經看過了，我還跑去找看看有沒有人弄出中文說明，不過都沒有像上面 Amauds 舉出的那些例子清楚易懂就是，只可惜沒講到「 |= 」的說明。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.11) Gecko/20071201 Firefox/2.0.0.11 (pigfoot)

過路的

文章主題 :

發表於 : 2008-01-22, 16:23

註冊時間: 2005-06-27, 15:59
文章: 466
來自: Republic of China ( R.O.C. )

真的好清楚，連小弟這種初學者都能完全了解，如 wini 兄所言，真要感謝 Amauds 兄的說明。

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

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

至於關於 W3C 說明 Selectors 的資料，也許是小弟眼拙，真沒找到像 Amauds 兄那樣精聞的資料。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.9) Gecko/20071112 BonEcho/2.0.0.9 (tete009 SSE PGO)

不惑仔Boohover

文章主題 :

發表於 : 2008-01-22, 21:06

註冊時間: 2005-11-23, 15:12
文章: 291
來自: 呆玩

CSS3 selectors at W3C

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

_________________
時間，人為與自然的衝突。~不惑仔

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

過路的

文章主題 :

發表於 : 2008-02-14, 00:05

註冊時間: 2005-06-27, 15:59
文章: 466
來自: Republic of China ( R.O.C. )

不惑仔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】那樣，請問有可能實現嗎？

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.9) Gecko/20071112 BonEcho/2.0.0.9 (tete009 SSE PGO)

coolcd

文章主題 :

發表於 : 2008-02-14, 01:27

註冊時間: 2003-11-18, 10:59
文章: 3473

用 CSS 3 的 selector
代碼:
* [id^=ad] {display:none;}
看不太懂你要問什麼，附上兩個例子
代碼:
@-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}
}

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI

回頂端

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9b4pre) Gecko/2008020704 Minefield/3.0b4pre

過路的

文章主題 :

發表於 : 2008-02-14, 18:30

註冊時間: 2005-06-27, 15:59
文章: 466
來自: Republic of China ( R.O.C. )

多謝 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 的效果嗎？就是任意將原有的行數做增減。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.9) Gecko/20071112 BonEcho/2.0.0.9 (tete009 SSE PGO)

coolcd

文章主題 :

發表於 : 2008-02-14, 21:53

註冊時間: 2003-11-18, 10:59
文章: 3473

第一個問題，應該還是有抓到，只是優先權不足，因為我設了 !important 後就可以擋掉了。至於為什麼優先權不足，我也不瞭解，CSS 看似簡單，其實是很不簡單的。 ^^

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

你問說可不可以用 stylish 調整表格中各欄的寬度，我是覺得很難啦～
之前網友有問過關於表格寬度的問題，有試過的應該會覺得表格寬度真的是很難纏... !@#%

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI

回頂端

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9b4pre) Gecko/2008020704 Minefield/3.0b4pre

過路的

文章主題 :

發表於 : 2008-02-15, 01:33

註冊時間: 2005-06-27, 15:59
文章: 466
來自: Republic of China ( R.O.C. )

多謝 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 設計出來就是給網頁設計者使用，要修改就直接到源頭做就行了，自然沒必要兜圈子弄轉換的動作。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.9) Gecko/20071112 BonEcho/2.0.0.9 (tete009 SSE PGO)

coolcd

文章主題 :

發表於 : 2008-02-15, 10:47

註冊時間: 2003-11-18, 10:59
文章: 3473

過路的寫:

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) 有這一段：

代碼:

html body table tbody tr td#ad_banner,
html body table tbody tr td#ad_banner a,
html body table tbody tr td#ad_banner a img,
html body table tbody tr td#ad_banner iframe,
html body table tbody tr td#ad_banner object,
html body table tbody tr td#ad_banner object embed
{clip:rect(auto, auto, auto, auto) !important;
display:inline !important;
height:90px !important;
width:700px !important;
opacity:1 !important;
filter: alpha(opacity=100) !important;
position:static !important;
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

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI

回頂端

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9b4pre) Gecko/2008020704 Minefield/3.0b4pre

第 1 頁 (共 2 頁)

[ 17 篇文章 ]

前往頁數 1，2 下一頁

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 6 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :