Как использовать сгенерированный JSF идентификатор элемента HTML с двоеточием ":" в селекторах CSS?

Question

Я работал с простым проектом Java EE с использованием JSF.

<h:form id="phoneForm">
    <h:dataTable id="phoneTable">

    </h:dataTable>
</h:form>

Я пытался установить CSS с помощью #phoneTable { ... }, но это не работает.После проверки источника HTML на стороне клиента выясняется, что сгенерированная JSF таблица HTML получает идентификатор клиента в виде id="phoneForm:phoneTable".Я не могу применить CSS через #phoneForm:phoneTable { ... }, потому что двоеточие указывает на начало псевдоселектора и вызывает ошибку.

Как я могу использовать его в любом случае в селекторах CSS?

Answer 1

: - это специальный символ в идентификаторах CSS, он представляет собой начало селектора псевдокласса , например :hover, :first-child и т. Д. Вам необходимо его избежать.

#phoneForm\:phoneTable {
    background: pink;
}

Это не работает только в IE6 / 7.Если вы также хотите поддержать этих пользователей, используйте \3A (с завершающим пробелом позади!)

#phoneForm\3A phoneTable {
    background: pink;
}

Выше работает во всех браузерах.

---

ТамЕсть несколько других способов решить эту проблему:

1. Просто оберните его в простой HTML-элемент и используйте вместо него стиль.

   <h:form id="phoneForm">
       <div id="phoneField">
           <h:dataTable id="phoneTable">
   

   с

   #phoneField table {
       background: pink;
   }
   

   ---

2. Используйте class вместо id.Например,

   <h:dataTable id="phoneTable" styleClass="pink">
   

   с

   .pink {
       background: pink;
   }
   

   или

   table.pink {
       background: pink;
   }
   

   Дополнительным преимуществом является то, что это дает гораздо больше свободы абстракции.CSS можно повторно использовать для нескольких элементов без необходимости добавлять селекторы и / или свойства копировать, когда вы хотите повторно использовать те же свойства для другого элемента (ов).

   ---

3. Начиная с JSFТолько для 2.x: измените разделитель JSF по умолчанию UINamingContainer на следующий контекстный параметр в web.xml.Например,

   <context-param>
       <param-name>javax.faces.SEPARATOR_CHAR</param-name>
       <param-value>-</param-value>
   </context-param>
   

   Так что символ разделителя становится - вместо :.

   #phoneForm-phoneTable {
       background: pink;
   }
   

   Недостатком является то, что вам нужно убедиться, что вы нигде не используете этот символ в идентификаторах, и, таким образом, это очень хрупкий подход.

   ---

4. Только для JSF 1.2: отключите добавление формы id.

   <h:form prependId="false">
       <h:dataTable id="phoneTable">
   

   , чтобы вы могли использовать

   #phoneTable {
       background: pink;
   }
   

   Недостатком является то, что <f:ajax> не будетудалось найти его и что это считается плохой практикой: UIForm с prependId = "false" разрывы.Этот атрибут не существует во всех других UINamingContainer компонентах, поэтому вам все равно придется обращаться с ними правильно (# 1 и / или # 2 здесь выше).

   ---

В вашем конкретном случае, я думаю, превращение его в класс CSS, как описано в # 2, является наиболее подходящим решением.«Телефонный стол», по-видимому, не представляет собой уникальный для всего сайта элемент.Реальные уникальные элементы для всего веб-сайта, такие как верхний колонтитул, меню, контент, нижний колонтитул и т. Д., Обычно не заключаются в формы JSF или другие контейнеры именования JSF, поэтому их идентификаторы в любом случае не будут иметь префикса.1080 *

• Как выбрать компоненты JSF с помощью jQuery?
• По умолчанию JSF генерирует непригодные идентификаторы, которые несовместимы с частью CSS веб-стандартов

Answer 2

<h:form prependId="false">

Не работает, если вы используете

<h:commandButton>
tag