Вопрос по css, jsf, clientid, css-selectors, facelets – Не работает, если вы используете

44

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

Почему бы вам не добавитьstyleClass приписать ваш dataTable? - Смотрите также:stackoverflow.com/questions/3111388/... timbooo
Я просто добавил двоеточие: phoneForm \: phoneTable, и оно работает. Спасибо за ссылку :) nXqd

Ваш Ответ

2   ответа
74

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

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

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

Смотрите также:Как выбрать компоненты JSF, используя jQuery?По умолчанию JSF генерирует непригодные идентификаторы, которые несовместимы с CSS-частью веб-стандартов.
Спасибо! Особенно для 2. и 3. части вашего ответа, так как для меня экранирование не сработало, а использование класса менее эффективно при рендеринге. s.Daniel
0
<h:form prependId="false">

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

<h:commandButton>
tag

Похожие вопросы