我一直在使用JSF处理一个简单的Java EE项目.

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

    </h:dataTable>
</h:form>

我试图通过设置CSS #phoneTable { ... },但它不起作用.在客户端检查HTML源代码时,JSF生成的HTML表格似乎以形式获取客户端ID id="phoneForm:phoneTable".我无法应用CSS via #phoneForm:phoneTable { ... },因为冒号表示伪选择器的开始并导致错误.

我怎么能在CSS选择器中使用它呢？

我在ID属性中看到过这样的HTML代码:

id="t1:c3"

谁可以给我解释一下这个？冒号(:)的目的是什么？

谢谢.

例如,以下代码段:

<h:form id="levelone">
    <h:inputText id="leveltwo" value="Test" />
</h:form>

生成以下标记:

<form id="levelone" name="levelone" method="post" action="/test/testPage.html" 
      enctype="application/x-www-form-urlencoded">
   <input id="levelone:leveltwo" type="text" name="levelone:leveltwo" 
          value="Test" />
</form>

是否可以更改自动生成的ID以使用与冒号不同的分隔符？

例如,我想改变

levelone:leveltwo

至

levelone-leveltwo

背景

我们在webapp中使用Mojo JavaScript应用程序框架,它似乎不喜欢id中的冒号.

输入HTML:

<div style="display: flex">
    <div class="half" style="font-size: 0.8em;width: 33%;"> apple </div>
    <div class="half" style="font-size: 0.8em;text-align: center;width: 28%;"> peach </div>
    <div class="half" style="font-size: 0.8em;text-align: right;width: 33%;" title="nofruit"> cucumber </div>
</div>

所需的输出:所有div元素正好在下面<div style="display: flex">.

我正在尝试div使用CSS选择器找到父级:

div[style="display: flex"]

这会引发错误:

>>> soup.select('div[style="display: flex"]')
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/Users/user/.virtualenvs/so/lib/python2.7/site-packages/bs4/element.py", line 1400, in select
    'Only the following pseudo-classes are implemented: nth-of-type.')
NotImplementedError: Only the following pseudo-classes are implemented: nth-of-type. …

我该如何选择div？

<div id="languageForm:j_id427:0:j_id432">Test</div>

这段代码不起作用

#languageForm:j_id427:0:j_id432 { color:#00aa00; }

...................

我读了这篇文章在CSS选择器中处理元素ID中的冒号,其中概述了如何选择包含冒号的已知id.

我想要做的是创建一个包含图像的JSF列表.然后使用jQuery我想选择每个图像并读入id.如果没有编写一些代码替换冒号,这可能吗？