javascript - 在 less 中访问空属性

Question

我正在使用一个 less 文件来设置我的 html 元素的样式，并且我正在尝试访问具有属性“kendo-date-time-picker”的输入元素。

html如下:

<input kendo-date-time-picker
               ng-switch-when="dateTimePicker"
               k-ng-model="$parent.model"
               k-format="'HH:mm - dd.MM.yy'"
               k-time-Format="'HH:mm'"
               data-on-change="change()"
               data-ng-readonly="readonly"
               data-ng-disabled="disabled"
               data-ng-required="required"
               data-ng-focus="focus($event)"
               data-ng-blur="blur()"
               interval="15"
               />

我的 less 文件现在看起来像这样:

& input[kendo-date-time-picker]{
    span{
        .slave{
            background: rgb(233, 231, 231) !important;
        }

        .k-picker-wrap.k-state-disabled{
            background-image: none !important;
            height: 30.3px;
            opacity: 1 !important;
            background: rgb(233, 231, 231) !important;
            border-width: 0px !important;
        }
    }
}

据我所知，这应该可以访问具有属性“kendo-date-time-picker”的任何输入元素，但它不起作用。

忘掉 '&'- 选择器，它嵌套在不同的元素中。 我究竟做错了什么？有人可以帮我解决这个问题吗？

问候

Answer 1

span 元素不允许包含在 input 元素中。您的浏览器可能正在通过将 span 元素移到外部来为您修复这个问题，因此您的标记最终看起来类似于:

<input ... />
<span> ... </span>

如果您希望在 [kendo-date-time-picker] 元素之后直接选择 span 元素，您可以使用 Adjacent Sibling Combinator (+) selector :

input[kendo-date-time-picker] + span {
    ...
}