CSS 样式与 ID 不兼容

Question

CSS 样式与 ID 不兼容

3

我正在使用 asp.net/C# 开发项目。目前我有一个 default.aspx 页面和一个母版页。 default.aspx 页面有许多控件，对于每个控件，我都定义了 class 和 id。我遇到的问题是，当我使用 class 对特定控件应用样式时，样式会正确地反映出来，但是当我使用控件的 id 进行样式设置时，样式不会反映出来。我纠正了这个问题，但我不知道如何解决它。例如，我有一个 textbox，它的 id="txtCustNo"，当我应用样式比如：

#txtCustNo{border:1px solid red}

当我应用样式 #ctl00_ContentPlaceHolder1_txtCustNo 时，它并没有反映出来，但是当我使用id txtCustNo 时，显示了更改。有人可以指出我哪里做错了吗？谢谢。

- Priyank Patel

3个回答

3

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

在新的ASP.NET版本（从版本4开始），还有一个ClientIDMode属性来控制生成方式。

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

或者，您也可以：

将文本框放在某个容器控件（例如 div）中，该容器控件没有runat="server"，并给该容器控件添加一个ID。然后修改你的CSS为例如： #txtContainer input{border:1px solid red}
使用你的文本框的CssClass属性，并在你的CSS文件中使用此类，而不是ID。

- Uwe Keim

非常感谢。我尝试使用CSSClass属性，它有效了，这意味着我需要为每个控件创建CSSClass以单独应用样式，对吗？ - Priyank Patel

1

@freebird 是的，你可以这样做。另一方面，你真的需要每个控件看起来都不同吗？如果不需要，多次使用CSS类在多个控件上是完全有效的，而且我认为这是一个很好的方法。 - Uwe Keim

嗯，我不需要为每个控件单独设置样式，所以我想我会使用CSS类来实现我的目的。然而，有些控件我需要单独应用样式，这时我应该使用控件的GeneratedID或内联样式。我这样做是正确的吗？谢谢。 - Priyank Patel

解耦总是一个好主意。我会反对内联样式，而更喜欢外部CSS。 - Uwe Keim

1

如果您正在使用Visual Studio 2010，您可以将控件的客户端ID模式设置为ClientIDMode="Static"
我建议您使用CSS和皮肤文件
此外，如果您想通过CSS样式化控件，只需在其周围包装一个div，然后应用样式（这些样式适用于该div内的所有输入）
divId input {
```
          width: 100px;
     }
```
ASP.NET主题和皮肤主题和皮肤

- Zo Has

我正在使用Visual Studio 2008，所以我猜我不能使用ClientIDMode对吧？那么您能告诉我如何在皮肤文件中使用CSS吗？谢谢。 - Priyank Patel

你需要使用Visual Studio 2010来针对 .Net 4.0 进行开发。不过，有一个简单的方法可以找到生成的客户端ID。请查看我发布的答案。 - ericdc

你可以在我的帖子中指出第3点，使用div进行样式设置，或者你可以使用皮肤文件。 - Zo Has

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ericdc · Accepted Answer

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

您可以使用以下代码查找生成的ID: <%# txtCustNo.ClientID %>

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

1. AutoID-呈现输出方式与.NET 3.5相同（自动生成的ID仍将呈现前缀，例如ctrl00以实现兼容性） 2. Predictable（默认）-修剪任何“ctl00”ID字符串，并且如果是列表/容器控件，则连接子ID（例如：id =“ParentControl_ChildControl”） 3. Static-将完整的ID命名控制权交给开发人员-呈现为控件ID设置的内容（例如：id =“JustMyId”） 4. Inherit-告诉控件推迟到父容器控件的命名行为模式

在使用ASP.Net 4.0之前，您必须接受自动生成的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

CSS 样式与 ID 不兼容

divId input {