Как использовать 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