CSS 样式不适用于 ID答案

【问题标题】：CSS Style Not Working With IDCSS 样式不适用于 ID
【发布时间】：2012-03-09 05:35:49
【问题描述】：

我在我的项目中使用asp.net/C#。目前我有一个default.aspx 页面和一个母版页。default.aspx 页面有许多控件，并且我为每个控件定义了class 和id。我面临的问题是，当我使用 class 将 style 应用于特定控件时，样式会正确反映，而当我使用控件的 id 执行此操作时，样式不会反映。我纠正了这个问题，但我不知道如何解决。例如，我有一个 textbox 和 id="txtCustNo" ，当我应用像

这样的样式时

#txtCustNo{border:1px solid red}

当我应用#ctl00_ContentPlaceHolder1_txtCustNo 之类的样式时，它没有反映，它显示了更改，但是 id 是txtCustNo..有人可以指出我哪里出错了。谢谢。

【问题讨论】：

标签： asp.net css

【解决方案1】：

服务器控件上的ID是自动生成的，与客户端生成的ID不同。

您可以通过以下方式找到生成的 ID：

ASP.NET 4 支持 Control 基类上的新 ClientIDMode 属性。 ClientIDMode 属性指示控件在呈现时应如何生成客户端 ID 值。 ClientIDMode 属性支持四种可能的值：

AutoID - 以 .NET 3.5 的形式呈现输出（自动生成的 ID 仍将呈现 ctrl00 等前缀以实现兼容性）
Predictable（默认）- 修剪任何“ctl00”ID 字符串以及列表/容器控件是否连接子 ID（例如：id=”ParentControl_ChildControl”）
静态 - 将完整的 ID 命名控制权移交给开发人员 - 他们设置为控件 ID 的内容就是呈现的内容（例如：id=”JustMyId”）
继承 - 告诉控件遵循父容器控件的命名行为模式

在 4.0 之前使用 ASP.Net 时，您必须使用自动生成的 ID。

有关 4.0 功能的更多信息，请参阅此链接。

http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx

【讨论】：

,,, 这意味着我需要使用生成的 id 进行样式设置吗？ ex ctl00_ContentPlaceHolder1_txtCustNo 是正确的方法，是吗
是的。您需要定位生成的 ID。

【解决方案2】：

客户端 ID 不等于 runat="server" 控件的 ID property。要获取客户端的ID，可以使用ClientID property。

在较新的 ASP.NET 版本（从版本 4 开始）上，还有一个 ClientIDMode property 来控制生成。

因此，要解决您的问题，您可以将 ClientIDMode 设置为 ClientIDMode.Static 或以某种方式从后面的代码中访问 ClientID 属性并将此值放入您的 CSS 定义中。

您也可以：

将文本框放入具有 no runat="server" 的容器控件（例如 div）中，并将 ID 放入此容器控件中，将您的 CSS 更改为例如#txtContainer input{border:1px solid red}
使用文本框的 CssClass property 并在 CSS 文件中使用此类，而不是 ID。

【讨论】：

非常感谢。所以我尝试使用 cssclass 属性并且它正在工作，这意味着我必须为每个控件创建 cssclass 以单独应用样式对吗？？？？
@freebird 你可以这样做，是的。另一方面，你真的需要每个控件看起来不同吗？如果没有，在多个控件上重新使用 CSS 类是完全有效的，在我看来是一个很好的方法。
,, 是的，我不需要为每个控件设置不同的样式，所以我想我会使用 cssclass 来达到我的目的，但是有些控件我必须单独对它们应用样式，那时我应该使用 generateid控制或内联样式的，，，我在正确的方向进行???谢谢你
解耦总是一个好主意。我会投票反对内联样式，而更喜欢外部 CSS。

【解决方案3】：

如果您使用的是 Visual Studio 2010，您可以将控件的 clientID 模式设置为ClientIDMode="Static"
我建议您将 CSS 与皮肤文件一起使用
此外，如果您尝试通过 CSS 设置控件样式，只需在其周围包裹一个 div，然后应用类似样式（这些样式将应用于该 div 内的所有输入）
divId 输入{
```
          width: 100px;
     }
```
ASP.NET Themes and Skins Themes & Skins

【讨论】：

我正在使用 Visual Studio 2008 ,,，所以我想我无法使用 ClientIDMode 对吗？？？？那么你能告诉我如何将 CSS 与皮肤文件一起使用吗，谢谢
您将需要 Visual Studio 2010 来定位 .Net 4.0。不过，有一种简单的方法可以找出生成的 clientID。请参阅我发布的答案。
您可以在我的帖子中指出 3，使用 div 进行样式设置，也可以使用皮肤文件

divId 输入{