Question

首先感谢您浏览这篇文章：）首先，让我显示一个按钮的标记。

<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>

现在按钮呈现为这样

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

要增加高度，

像这样直接在其标记中进行高度分配属性，
或者我可以使用外部样式表来应用其样式，对吗？

方法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：

externalstylesheet.css

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

现在，按预期方式 01 渲染

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

Answer 1

删除space，您的班级处于同一水平

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

Answer 2

您必须了解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的瞬间子代。

也许它可以帮助您建立有关此问题的知识和解决方案。

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

外部样式表文件上的样式分配问题

externalstylesheet.css

2 个答案: