特定 ID 的 CSS 样式未按预期工作答案

【问题标题】：css style to the specific id is not working as expected特定 ID 的 CSS 样式未按预期工作
【发布时间】：2012-09-29 17:51:52
【问题描述】：

在我的 JSF 2 Primeface 应用程序中，我有以下文件上传组件。

<p:fileUpload id="related_image" fileUploadListener="#{fileUploadController.handleFileUpload}"  
    mode="advance"  
    auto="false" 
    showButtons="false"
    sizeLimit="100000"
    fileLimit ="1"
    allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
    style="width: 310px"/>

我想从此组件中删除进度条，所以我这样做了

.progress {
display: none;

}

这个工作，但我想删除附加到这个文件上传组件的进度条，而不是从我的整个应用程序中，所以我尝试了

#related_image .progress{
display:none;

}

但这不起作用，有什么线索吗？

【问题讨论】：

CSS 不是 JSF 组件的样式，而是来自服务器的 HTML 输出。请粘贴浏览器收到的 HTML 代码

标签： html css jsf-2 xhtml primefaces

【解决方案1】：

你的<p:fileUpload> 组件可以有前缀的id。查看部署后生成的 HTML 输出并检查组件的实际 id。 <p:fileUpload> 在某些 form 中（或在其他包装组件中，例如 <p:panel>）。 Primefaces 自动将forms id 添加到此form 内的组件中。所以<p:fileUpload> 的实际 id 可能看起来像 id="formID:fileUpID"，这就是它找不到 #fileUpID 的原因。

注意：您可以通过prependId="false" 属性禁用前置ID。

注意2：您也可以尝试为<p:fileUpload>指定styleClass，您可以在CSS中设置样式。

【讨论】：

【解决方案2】：

首先，你有一个额外的空间

\#related_image .progress{

选择器应该是

#related_image.progress{

其次，如果 fileUpload 组件确实有前缀 id（正如 Fallup 建议的那样），您需要从 css 选择器中的 id 中转义冒号 - 参见例如Handling a colon in an element ID in a CSS selector 这个。

【讨论】：

【解决方案3】：

一般来说（在 css 中您需要使用 \3a Handling a colon in an element ID in a CSS selector 转义冒号，而在 jquery 中您应该使用 \\:）

#some_prefix_id\3a your_file_upload_component_id .someClass{
    display:none;
}

其中 some_prefix_id 可能是某个表单 ID 或某个命名容器标识，

虽然，INMO 更好的方法是为您的表单分配一个 id 并在 css 中使用此选择器：

#your_form_id .someClass{
    display:none;
}

【讨论】：