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

Question

Как использовать JSF сгенерированный HTML-элемент ID с двоеточием": "в селекторах 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 { ... }, потому что двоеточие указывает на начало pseudoselector и вызывает ошибку.

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

43

clientid css css-selectors facelets jsf

автор: BalusC

2 ответов

автор: BalusC · Accepted Answer · 2017-05-23 12:02:08

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

#phoneForm\:phoneTable {
    background: pink;
}

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

#phoneFormA 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: измените значение JSF по умолчанию UINamingContainer разделитель по следующему контексту param в 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 . Этот атрибут не существует во всех других UINamingContainer компоненты, поэтому вы все еще должны иметь дело с ними правильный путь (#1 и/или #2 выше).

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

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

2 ответов

Читайте также: