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附加到角度自动完成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;
}

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

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

例如，

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

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

如何用附加的类覆盖css？

1 个答案: