IE10 игнорирует first-child в css и относится ко всем?

То, что я пытаюсь сделать, это удалить стрелку выпадающего из select с этим CSS:

.Gender:first-child::-ms-expand {
    display: none;
}

Элемент select отключен, и его содержимое задается программно. Это все еще выбор из-за нашего "уникального" подхода связывания "по-своему", который был бы огромным пересмотром для замены / обновления.

В основном у меня есть раздел для ввода основной информации для динамического числа людей. Первый экземпляр всегда является первичным экземпляром, и его данные поступают из другого раздела страницы, поэтому он здесь отключен и привязан к значениям в этой другой форме. Любая другая запись после того, как она редактируется. Идея состояла в том, чтобы убрать стрелку выпадающего списка из первых выборов, потому что они только для чтения. Я знаю, что, хотя стрелка раскрывающегося списка отсутствует, выбор продолжает работать, но я все еще хочу, чтобы он присутствовал для всех остальных вариантов, которые не отключены.

Я знаю, что это работает в упрощенном JSFiddle, но на моем сайте ВСЕ выбранные, у которых есть эти классы, скрывают свою стрелку раскрывающегося списка. Что я могу найти на моем сайте, чтобы обойти :first-child псевдо класс? Почему это может работать на скрипке, а не на реальном сайте?

Все, что я читаю, говорит о том, чтобы проверить твой тип. Мой <!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//en">, Никто из тех, кого я когда-либо обнаружил, явно не говорит, какой именно тип документа использовать, так что это может быть не на 100% правильно.

Also, this only needs to work in IE10, it's an internal web app that'll never be run anywhere else.

Источник

1 ответ

Решение

Единственная наиболее распространенная причина каждого экземпляра конкретного совпадения элемента :first-child, когда должен совпадать только первый из них, если каждый из этих элементов действительно существует в своем собственном элементе контейнера. Вот пример:

<div class='parent'>
  <select class='Gender'>
    <option>Male</option>
    <option>Female</option>
  </select>
</div>
<div class='parent'>
  <select class='Gender'>
    <option>Male</option>
    <option>Female</option>
  </select>
</div>
<div class='parent'>
  <select class='Gender'>
    <option>Male</option>
    <option>Female</option>
  </select>
</div>

Здесь каждый .Gender является первым и единственным потомком своего родительского элемента, .parent, .parent Сами элементы, с другой стороны, являются братьями и сестрами одного и того же родительского элемента (не показан). В зависимости от того, как выглядит ваш источник, может быть трудно точно определить местоположение этих родительских элементов в источнике, но пока ваша разметка действительна, они должны быть где-то.

Если это действительно является проблемой, исправить это тривиально - просто переместите :first-child псевдокласс к соответствующему элементу:

.parent:first-child .Gender::-ms-expand {
    display: none;
}

Обновленная скрипка

Источник
Другие вопросы по тегам