Question

我必须给HMTL的这部分一个特定的CSS样式：

<div id = "comp_display1" style = "display: none;">
<div class = "ui-widget-overlay ui-front"></div>

<div class="ui-helper-hidden-accessible" role="log" aria-live="assertive" aria-relevant="additions"></div>


<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front col-xs-3 " style= "height: auto !important;
        width: auto !important;
        overflow : scroll;
    display: inline;
    position: absolute;

    left: 20%;

    z-index: 500;

    flex-wrap : wrap;
    border: medium none;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;"

     tabindex="-1" role="dialog" aria-describedby="signInPopup" aria-labelledby="ui-id-1">


<div>
                <div class="whiteBg">
                    <div class="sortingTabs">
    <div class="col-xs-1"></div>

    <div class="col-xs-2">Details</div>
    <div class="col-xs-3" id="name1">Hotel 1</div>
    <div class="col-xs-3" id="name2">Hotel 2</div>
    <div class="col-xs-3" id="name3">Hotel 3</div>
</div>
<center>
<div class="table-responsive wrapper" id="infos">


<div class="row">
                <ul >
                    <li class="col-xs-1 compare"><img src="./details_files/experience.png" alt=""></li>
                    <li class="col-xs-2" ><strong>Total Experience</strong></li>
                    <li class="col-xs-3" id= "url1">7 Year(s)</li>
                    <li class="col-xs-3">7 Year(s)</li>
                    <li class="col-xs-3">7 Year(s)</li>
                </ul>
</div>          
.
.
.
AND SO ON UNTIL ALL THE DIV'S HAVE CLOSED

我想用这个CSS给unorded列表一个特定的样式：

  ul li{ display: table-cell;
    vertical-align: top;
    width: 185px;
    border-right: 5px solid #E6E6E6;
    border-bottom: 5px solid #E6E6E6;
    padding: 10px;
    background-color: #FFF;}

我只想改变这部分代码。我该如何标记CSS？

Answer 1

我不确定我是否理解你的问题，但我认为你的意思是你只想在没有编辑HTML本身的情况下定位那个特定的ul而只是改变CSS？如果是这样，您可以通过指定其父ul来定位特定id，即：

#infos ul li { 
    display: table-cell;
    vertical-align: top;
    width: 185px;
    border-right: 5px solid #E6E6E6;
    border-bottom: 5px solid #E6E6E6;
    padding: 10px;
    background-color: #FFF;
}

Answer 2

给行div包裹ul一个特定的类，比如list-wrapper，然后定义这样的样式：

.list-wrapper ul li {
   ...
}

不能给特定的ul一个不同的CSS风格？

2 个答案: