Как использовать чистый селектор css для выбора скрытого элемента

<td class="col" style="display:none">AAA
      <span prop="1" class=" clear-icon " style=""></span>
</td>

Я хочу использовать чистый css, чтобы скрыть текст "AAA", чтобы показать span btn. Есть ли способ сделать это в чистом css?

Ответ 1

Если ваш дизайн не очень отзывчив, я имею в виду, что вам просто нужно установить фиксированный размер шрифта для внутреннего span, я думаю, что у нас есть такое чистое решение. Идея состоит в том, чтобы установить font-size от td до 0, он полностью скроет текст node:

.col[style*="display:none"] {
  display:table-cell!important;
  font-size:0;
}
.col > span {
  font-size:20px;
}

Демо-версия

Ответ 2

Вы можете использовать свойство visibility, но это зарезервирует пространство для текста "AAA":

.col {    
    visibility:hidden;
}

.clear-icon {
    visibility:visible;
}

Кроме того, если вы не можете удалить display:block !important; из тэга td, просто добавьте правило !important в CSS

.col {
    display:block !important;
    visibility:hidden;
}

Ответ 3

см. эта скрипка

<table>
    <td class="col">AAA <span>Show Me</span>
    </td>
</table

.col {
    visibility:hidden;
}
.col span {
    visibility:visible;
}

Ответ 4

http://jsfiddle.net/vLNEp/4/

<table><tr><td class="col"><span class="hidden">AAA</span>
      <span prop="1" class="clear-icon"></span>
</td></tr></table>

.col .hidden {position:absolute;top: -9999px; left: -9999px;}