CSS 压倒一切的问题。只有与字体相关的行有效

Question

我正在使用 telerik:RadImageAndTextTile 创建菜单。我按照说明应用了自定义皮肤 here!。下面是css代码。

.RadTile_MyCustomSkin {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #ffffff;
  background-color: #eeeeee;
  /* Loading image */ }
  .RadTile_MyCustomSkin.rtileSelected {
    border-color: #666; }
  .RadTile_MyCustomSkin.rtileHovered {
    border-color: #9f9f9f; }
  .RadTile_MyCustomSkin.rtileSelected.rtileHovered {
    border-color: rgba(102, 102, 102, 0.7); }
  .RadTile_MyCustomSkin.rtileSelected .rtileSelectedIcon {
    background-image: url('Tile/rtileSprite.png');
    _background-image: url('Tile/rtileSpriteIE6.png'); }
  html .RadTile_MyCustomSkin.RadTile h6.rtileTitle {
    color: #333333; }
  .RadTile_MyCustomSkin .rtilePeekContent {
    background-color: #eeeeee; }
  .RadTile_MyCustomSkin.rtileLoading,
  .RadTile_MyCustomSkin .rtileLoading {
    background-image: url('Common/loading_small.gif'); }

当我更改字体大小和颜色时，它可以正常工作并更改磁贴中的文本格式。但是其余的属性，例如

.RadTile_MyCustomSkin.rtileHovered { border-color: #666; }

虽然我改变了它们，但它们对瓷砖皮肤没有影响。关于导致此问题的原因的任何想法？提前致谢

这是网页代码

<telerik:RadImageAndTextTile EnableEmbeddedSkins="false" Skin="MyCustomSkin"  ID="tlTrow_truck" runat="server" Shape="Square" BackColor="#f70000" ImageUrl="~/tiles/towtruck.png"
                Text="Tow Truck & Garage Services">                
 </telerik:RadImageAndTextTile>

Answer 1

使您的选择器更重，很可能有某些东西覆盖了它们（例如，内置规则）。您可以为每个规则添加一个 div：

        div.RadTile_MyCustomSkin.rtileHovered
        {
            border-color: blue;
        }

        div.RadTile_MyCustomSkin.rtileSelected.rtileHovered
        {
            border-color: rgba(102, 102, 102, 0.7);
        }

CSS 压倒一切的问题。只有与字体相关的行有效

CSS overriding issue. Only font related lines are working

css

asp.net

telerik

hover