在外部样式表文件上分配样式时出现问题

Posted 2021-04-15

首先感谢查看这篇文章:)首先让我展示一个按钮的标记。

<telerik:RadButton ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" Width="100%" UseSubmitBehavior="true"
                                         OnClientClicked="showNotification" ClientIDMode="Static" CssClass="customButton">
                                        <Icon PrimaryIconCssClass="rbSave" />
                                    </telerik:RadButton>

这会产生，

<span id="btnSave" class="RadButton RadButton_Metro rbVerticalButton customButton"
   style="display:inline-block;width:100%;" tabindex="0">
<span class="rbPrimaryIcon rbSave"></span>
<input class="rbDecorated rbPrimary" type="submit" name="ctl04$btnSave" id="btnSave_input" 
   value="Save" style="width:100%;padding-left:0;padding-right:4px;height:20px;" tabindex="-1">
<input id="btnSave_ClientState" name="btnSave_ClientState" type="hidden" autocomplete="off" value="{&quot;text&quot;:&quot;Save&quot;,&quot;value&quot;:&quot;&quot;,&quot;checked&quot;:false,&quot;target&quot;:
   &quot;&quot;,&quot;navigateUrl&quot;:&quot;&quot;,&quot;commandName&quot;:&quot;&quot;,&quot;commandArgument
   &quot;:&quot;&quot;,&quot;autoPostBack&quot;:true,&quot;selectedToggleStateIndex&quot;:0,&quot;validationGroup&quot;:null
   ,&quot;readOnly&quot;:false,&quot;primary&quot;:false,&quot;enabled&quot;:true}"></span>

现在按钮呈现如下

如图所示，此按钮的文本/值不显示，我需要给它一些高度。

为了增加高度我可以，

1. 直接高度在其标记中分配属性，如下所示，
2. 或者我可以使用外部样式表来应用它的风格，对吧？

方法01：

<telerik:RadButton ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" Width="100%" UseSubmitBehavior="true"
                                             Height="20px"

设置高度后呈现为：

<span id="btnSave" class="RadButton RadButton_Metro rbVerticalButton customButton"
   style="display:inline-block;height:20px;width:100%;height:20px;" tabindex="0">
<span class="rbPrimaryIcon rbSave"></span>...

方法02：

外部样式sheet.css

.RadButton .RadButton_Metro .rbVerticalButton .customButton{
height:20px !important;
}

现在，方法01按预期呈现

但接近02（即使用外部样式表文件来应用样式）不是，为什么？

答案

您必须了解CSS选择器，如何选择元素（子元素，子元素及其多类）多类意味着连接类，您将学习有关CSS选择器的详细信息：https://www.w3schools.com/cssref/css_selectors.asp。

你的CSS是：.RadButton .RadButton_Metro .rbVerticalButton .customButton{ height:20px !important; }实例更改为

.RadButton.RadButton_Metro.rbVerticalButton.customButton{
    height:20px !important;
}

这意味着RadButton也包含RadButton_Metro和customButton它不是一个孩子到另一个班级。

当你写.class1 .class2，这意味着class2是class1的孩子。当你写.class1 > .class2，这意味着class2是class1的当前孩子。

也许它可以帮助您为此问题构建知识和解决方案。

======谢谢======

另一答案

删除space，你的班级在同一级别

 .RadButton.RadButton_Metro.rbVerticalButton.customButton{
    height:20px !important;
  }