CSS表單[動作]不能與查詢字符串一起工作

大家好，我的CSS有幾個問題我想突出顯示基於用戶所在頁面的導航鏈接。CSS表單[動作]不能與查詢字符串一起工作

我有這樣的作品，我希望它做，但當我傳遞一個查詢字符串到pcisHPprofile.aspx該CSS不起作用。有誰知道我可以如何讓這種風格與查詢字符串一起工作？

body form[action="pcisHPprofile.aspx"] #btnuser 

{ 
    padding: 18px 4px 5px 4px; 
    background-image: url(../images/tabbluleft.gif) ; 
    background-repeat:no-repeat; 
    color: #fff; 

} 



<div id="nav" class="nav" > 

     <ul> 
     <li id="tab1"> 
     <a id="btnsession" href="pcissessionlist.aspx" > <span >Session</span></a> 
     </li> 
      <li id="tab2"> 
       <a id="btnsystem" href="pcissystemsettings.aspx" > <span >System Settings</span></a> 
      </li> 
      <li id="tab3"> 
      </li> 
      <li id="tab4"> 
          <a id="btnuser" href="pcisuserlist.aspx" > <span >User Logins</span></a> 
       </li> 
      <li id="tab5"> 
              <a id="btninterpreter" href="pcisinterpreterlist.aspx" > <span >Interpreter Profile</span></a> 

       </li> 
     <li id="tab6"><asp:LinkButton ID="btnreports" runat="server" Visible="false" cssid="cssreports" PostBackUrl="#"><span>Reports</span></asp:LinkButton></li> 
     </ul> 

    </div>

來源

2010-07-09 Antony Delaney

我假設#btnuser是某種形式的內部的一些按鈕，其中的一種形式有行動=「pcisHPprofile.aspx」？

如果這是正確的，那麼你的錯誤是，你有許多按鈕具有相同的ID attirbute id =「btnuser」。 ID屬性必須在頁面上唯一。更改ID = 「btnuser」課堂上的按鈕= 「btnuser」和你選擇的：

body form[action="pcisHPprofile.aspx"] #btnuser { 
}

到

body form[action="pcisHPprofile.aspx"] .btnuser { 
}

那麼它應該工作。

在第一種形式下，只有當id =「btnuser」的FIRST按鈕實際上在action =「pcisHPprofile.aspx」的表單內時纔有效。如果它在任何其他形式內，那麼它將不起作用。

最好的問候， SWilk

UPDATE：

OP更新的問題後，我認爲，這種形式的選擇中應當工作：

body form[action^="pcisHPprofile.aspx"] #btnuser { 
... 
}

它會使用id = btnuser一個元素在表格內部，其動作以「pcisHPprofile.aspx」開頭。如果acutal action attibute僅包含「pcisHPprofile.aspx」或「pcisHPprofile.aspx？any-parameters &和= some-values」，則無關緊要。

最好的問候， SWilk

來源

2010-07-09 13:56:32 SWilk

它的一個href和每個人都有一個唯一的ID User Logins Interpreter Profile – 2010-07-09 13:59:17

表單元素誤導了我。如果是這樣，那麼我看不到其他原因，爲什麼這不應該工作。如果你可以提供你的html代碼的例子，那麼發現問題可能會更容易。 – SWilk 2010-07-09 14:11:45

我編輯了這個問題。它一切正常，直到pcisHPprofile.aspx是pcisHPprofile.aspx？userID = 5 – 2010-07-09 14:21:08

對樣式使用動作屬性是一種不好的做法。只要給你的表單一個名稱，類或ID如< form class =「pcisHPprofile」action =「pcisHPprofile.aspx」>，然後將CSS樣式應用於該名稱/ class/id。

form.pcisHPprofile { 
    padding: ...

來源

2010-07-09 13:46:35

聽起來好像它應該工作。唯一的問題是我正在使用母版頁。 – 2010-07-09 13:49:53

找到一個可行的解決方案。我不是百分之百熱衷但有效的小黑客。

我改變了查詢字符串看起來像這樣

profile.aspx?-&username=

從這個

profile.aspx?username=

，我改變了風格

Form[action|="pcisinterpreterprofile.aspx?"] #tab5 


{ 
background-image: url(../images/tabbluright.gif); 
    background-repeat:no-repeat; 

}

不同的是，我已經改變了=到一個| =。

[ATT | = VAL] 表示與ATT屬性，其值的元素或者是恰好「VAL」或用「val」緊接着開始「 - 」（U + 002D）。這主要是爲了允許語言子碼的匹配（例如，一個元件上在 HTML的 hreflang屬性）在RFC 3066中描述（[RFC3066]）或其繼任者。對於lang （或xml：lang）語言子代碼的匹配，請參閱：lang 僞類。

通過這樣做，CSS選擇器在查詢字符串的頁面上工作。你只需要確保查詢字符串至少有？ - 在開始。正如我最後所說的那樣，它並不偉大，但它的作品。

來源

2010-07-13 08:14:07

CSS表單[動作]不能與查詢字符串一起工作

回答

相關問題