如何使用添加的其他类覆盖CSS？

Question

在md-autocomplete角材料中，如何根据要求覆盖css，而又不影响相同自动完成的其他实现。

<div flex="50" class="myclass" >

                    <md-autocomplete md-input-name="ownerAutocomplete"
                                     md-search-text=""
                                     md-selected-item=""
                                     md-selected-item-change=""
                                     md-items=""
                                     md-item-text="emp.name"
                                     md-floating-label="Owner"
                                     md-menu-class="custom-template"
                                     flex
                            style="margin-top:-2px">
                        <md-item-template>
                            <div class="item-title">
                                //my list of item
                            </div>
                        </md-item-template>
                    </md-autocomplete>
                </div>

我想在两个地方使用此自动完成搜索栏，如何编写两个diff CSS，当我编写下面的CSS并将myclass追加到角度自动完成CSS时，它也会影响另一个我也未使用myclass的自动完成栏。 例如，我需要在一个搜索栏上显示边框底部，而在另一栏上显示边框应为0px。

.myclass md-autocomplete.md-default-theme, md-autocomplete{
  background : transparent;
  border-bottom: 1px solid #efefef;
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
.myclass md-autocomplete input:not(.md-input)
{
    color: #444 !important;
    font-size:13.7px;
    padding: 0px;
    font-family: "RionaSans-ExtraLight";
    opacity: 0.80;
}
.myclass md-autocomplete input[placeholder]
{
    color: #333 !important;
    font-family: "RionaSans-ExtraLight";
    opacity: 0.80;
    font-size:13.7px;
}
.myclass md-autocomplete *::-webkit-input-placeholder {
    color: #333;
    font-family: "RionaSans-ExtraLight";
    opacity: 0.80;
    font-size:13.7px;
}
.myclass md-autocomplete *:-moz-placeholder {
    /* FF 4-18 */
    color: #333;
    font-family: "RionaSans-ExtraLight";
    opacity: 0.80;
    font-size:13.7px;
}
.myclass md-autocomplete *::-moz-placeholder {
    /* FF 19+ */
    color: #333;
    font-family: "RionaSans-ExtraLight";
    opacity: 0.80;
    font-size:13.7px;
}
.myclass md-autocomplete *:-ms-input-placeholder {
    /* IE 10+ */
    color: #333;
    font-family: "RionaSans-ExtraLight";
    opacity: 0.80;
    font-size:13.7px;
}

Answer 1

Specificity selector是您的答案。

例如，如果您使用名为.red的类为元素提供red背景，则CSS如下所示。

例如，

.red{
    background:red;
}

现在，该元素可以具有红色类，但是也可以使同一类的其他元素获得此红色类。

为了避免这种情况，请使用顶级父级并继续继承它，直到您进入子级red类。 最好的方法是从id选择器开始对其进行定位，因为这是唯一的，并且可能不会影响其他元素。

例如，

.#element1 div.otherclass div.otherclasses div.red{
    background:red;
}

希望这可以帮助。 你可以在这里阅读更多