Question

大家好我的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>

Answer 1

我假设#btnuser在某些表单中有一些按钮，其中一个表单有action =“pcisHPprofile.aspx”？

如果这是正确的，那么您的错误就是您有许多具有相同ID的按钮attirbute id =“btnuser”。 ID attibute必须在页面上独一无二。将id =“btnuser”更改为按钮和选择器上的class =“btnuser”：

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

到

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

然后它应该工作。

在第一种形式中，只有当id =“btnuser”的FIRST按钮实际位于具有action =“pcisHPprofile.aspx”的表单内时，它才有效。如果它在任何其他形式内，那么它将无法工作。

祝你好运， SWilk

更新：

在OP更新问题之后，我认为这种形式的选择器应该有效：

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

表单中有id = btnuser的元素，以“pcisHPprofile.aspx”开头。如果acutal action attibute只包含“pcisHPprofile.aspx”或“pcisHPprofile.aspx？any-parameters＆amp; and = some-values”，那就无所谓了。

祝你好运， SWilk

Answer 2

使用动作属性进行样式化是一种不好的做法。只需给你的表单一个名称，类或ID，如＆lt; form class =“pcisHPprofile”action =“pcisHPprofile.aspx”＆gt;然后将CSS样式应用于该名称/ class / id。

form.pcisHPprofile { 
     padding: ...

Answer 3

找到了一个有效的解决方案有点hacky，我不是100％热衷于它，但它的工作原理。

我将查询字符串更改为这样

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）。这主要是为了允许语言子码匹配（例如， h元素中的hreflang属性 HTML），如RFC 3066中所述（[RFC3066]）或其继任者。对于郎（或xml：lang）语言子代码匹配，请看：朗伪类。

通过执行此操作，css选择器适用于具有查询字符串的页面。你只需要确保查询字符串至少有？ - 一开始。正如我在最后所说的那样，它不是很好但是有效。

CSS表单[action]不使用Query Strings

3 个答案: