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

Я работал с простым проектом 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-селекторах?

Ответ 1

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

#phoneForm\:phoneTable {
    background: pink;
}

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

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

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

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

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

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

#phoneField table {
    background: pink;
}

Используйте class вместо id. Например.
```
<h:dataTable id="phoneTable" styleClass="pink">
```
с
```
.pink {
    background: pink;
}
```
или
```
table.pink {
    background: pink;
}
```
Дополнительное преимущество заключается в том, что это позволяет значительно больше свободы абстракции. CSS многократно используется для нескольких элементов без необходимости добавления селекторов и/или свойств copypaste, когда вы хотите повторно использовать одни и те же свойства для другого элемента.
Так как только JSF 2.x: измените разделитель по умолчанию UINamingContainer JSF по следующему параметру контекста в web.xml. Например.
```
<context-param>
    <param-name>javax.faces.SEPARATOR_CHAR</param-name>
    <param-value>-</param-value>
</context-param>
```
Итак, символ разделителя становится - вместо :.
```
#phoneForm-phoneTable {
    background: pink;
}
```
Недостаток заключается в том, что вам нужно убедиться, что вы не используете этот символ самостоятельно нигде в идентификаторах, и это, таким образом, очень хрупкий подход.
Поскольку JSF 1.2 только: отключить добавление формы id.
```
<h:form prependId="false">
    <h:dataTable id="phoneTable">
```
чтобы вы могли использовать
```
#phoneTable {
    background: pink;
}
```
Недостатком является то, что <f:ajax> не сможет найти его и что он считается плохой практикой: UIForm с prependId = "false" breaks < f: ajax render > . Этот атрибут не существует во всех других компонентах UINamingContainer, поэтому вам все равно придется иметь дело с ними правильно (# 1 и/или # 2 здесь выше).

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

См. также:

Ответ 2

<h:form prependId="false">

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

<h:commandButton>
tag