Как использовать сгенерированный 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?

Источник

2 ответа

Решение

: это специальный символ в идентификаторах 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 можно повторно использовать для нескольких элементов без необходимости добавлять селекторы и / или свойства copypaste, если вы хотите повторно использовать те же свойства для другого элемента (ов).

  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, поэтому их идентификаторы в любом случае не будут иметь префикса.

Смотрите также:

Источник 
<h:form prependId="false">

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

<h:commandButton>
tag
Источник
Другие вопросы по тегам