CSS-форма [действие] не работает со строками запроса

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 - это несколько кнопок внутри некоторых форм, где одна из форм имеет действие = "pcisHPprofile.aspx"?

Если это так, то ваша ошибка в том, что у вас много кнопок с одинаковым идентификатором attirbute id = "btnuser". Идентификационный номер ДОЛЖЕН быть уникальным на странице. измените id = "btnuser" на class = "btnuser" на кнопках и вашем селекторе с:

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

до

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

Тогда это должно сработать.

В первой форме она может работать, только если кнопка FIRST с id = "btnuser" фактически находится внутри формы с action = "pcisHPprofile.aspx". Если он находится внутри какой-либо другой формы, он не будет работать.

С наилучшими пожеланиями, SWilk

UPDATE:

После того, как ОП обновил вопрос, я думаю, что эта форма селектора должна работать:

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

Это будет элемент с id = btnuser внутри формы, действие которого начинается с"pcisHPprofile.aspx". Не имеет значения, содержат ли атрибуты острых действий только «pcisHPprofile.aspx» или «pcisHPprofile.aspx? Any-parameters & and = some-values».

С уважением, SWilk

Answer 2

Нашел рабочее решение. немного хакерский, который я не на 100% увлечен, но это работает.

Я изменил строку запроса, чтобы она выглядела так

profile.aspx?-&username=

из этого

 profile.aspx?username=

и я изменил стиль на

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


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

}

Разница в том, что я изменил = на | =.

[ATT | = значение] Представляет элемент с атрибутом att, значение которого либо именно "val" или начинающийся с "val" сразу после "-" (U + 002D). Это в первую очередь предназначено для того, чтобы совпадения субкода языка (например, атрибут hreflang на элементе в HTML), как описано в RFC 3066 ([RFC3066]) или его преемник. Для языка (или xml: lang) языковой субкод соответствие, пожалуйста, смотрите: lang псевдо-класс.

, делая это, селектор css работает на страницах со строками запроса. вам просто нужно убедиться, что строка запроса имеет хотя бы? - в начале. Как я уже говорил, это не очень хорошо, но работает.

Answer 3

Использование атрибута action для стиля - плохая практика.Просто дайте вашей форме имя, класс или идентификатор, каки затем применить стиль CSS к этому имени / классу / идентификатору.

form.pcisHPprofile { 
     padding: ...