html - 如何用添加的附加类覆盖 css？

Question

在 md-autocomplete Angular Material 中如何根据要求覆盖 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>

我想在两个地方使用这个自动完成搜索栏，我怎么能写两个不同的 css，当我写下面的 css 并将 myclass 附加到 Angular 自动完成 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

特异性选择器就是您的答案。

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

例如，

.red{
    background:red;
}

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

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

例如，

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

希望这对您有所帮助。 您可以阅读更多 here