如何更改我的GWT TabPanel的CSS

Question

我正在尝试更改标签面板的css 这是我的代码

      <g:HTMLPanel>
    <div class="center">
        <g:TabLayoutPanel ui:field="tabPanel" barUnit="PX"
            barHeight="60" width="500px" height="250px" 
                                 styleName="gwt-TabPanel">
            <g:tab >
                <g:header>
                    DashBoard
        </g:header>

我有这个css

    .gwt-TabPanel {
    background-color: rgb(36, 36, 36);
    }

    .roundedTab {
    background-color: red;  
    }

   .gwt-TabBar {
    background-color: rgb(36, 36, 36);
    padding-top: 5px;
    }

    .gwt-TabPanelBottom {
    background-color: rgb(64, 64, 64);
    border-top: none;

    padding-top: 1px;
    margin: 0px 0px 3px 0px;
    }

    .gwt-TabBar .gwt-TabBarFirst {
    border-bottom: 1px solid rgb(36, 36, 36);
    padding-left: 3px;
    }

   .gwt-TabBar .gwt-TabBarRest {
    border-bottom: 1px solid rgb(36, 36, 36);
    padding-right: 3px;
    }

   .gwt-TabBar .gwt-TabBarItem {           
    border-bottom: 1px solid rgb(36, 36, 36);

    margin-left: 2px;
    margin-right: 2px;

    cursor: pointer;
    cursor: hand;

    background-color: rgb(48, 48, 48);
    } 

    .gwt-TabBar .gwt-TabBarItem-selected {  
    border-bottom: 1px solid rgb(64, 64, 64);       
    background-color: rgb(64, 64, 64);
    }

    .gwt-TabBar .selectedText {
    color: white;
    background-color: rgb(64, 64, 64);
    font-weight: bold;      
    padding: 3px 7px 5px 7px;
    }

    .gwt-TabBar .unselectedText {
    color: rgb(227, 209, 13);       
    background-color: rgb(48, 48, 48);

    padding: 3px 7px 5px 7px;       
    }

   .gwt-TabBar .onMouseEnter {
    color: white;
    background-color: rgb(64, 64, 64);
    }

    .gwt-TabBar .onMouseLeave {

     }

    .deckPanel {
    margin: 5px;
   }

但它会使整个标签面板变黑并且标签也会消失。 我想要的是使每个选项卡（不是完整的选项卡面板）背景颜色为蓝色并删除tabPanel的边框

我知道如何实现这一目标。

Answer 1

从.gwt-TabPanel中删除background-color属性，并将新的CSS属性添加为

.gwt-TabLayoutPanelTab {
    background-color: blue;
}

.gwt-TabPanel是整个Tabpanel的CSS，但.gwt-TabLayoutPanelTab是应用于每个标签的CSS。