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

Question

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

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

现在按钮呈现如下

如图，这个按钮的text/value没有显示出来，我需要给它一些高度。

我可以增加高度，

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

方法 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，你的class在同一级别

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

Answer 2

你必须了解CSS选择器，如何select一个元素（children，child-child和他的multiclass）multi class 表示连接 class 您了解有关 CSS select 或：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 它不是一个 children 到另一个 class.

当你写 .class1 .class2 时，意味着 class2 是 class1 的 children。当你写 .class1 > .class2 时，这意味着 class2 是 class1.

的瞬间 child

也许它可以帮助您为这个问题积累知识和解决方案。

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

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

Problem assigning style on external stylesheet file

html

css

telerik

externalstylesheet.css