дочерний элемент очистить родительский css

Question

дочерний элемент очистить родительский css

0

<style>
#popBox{width:100%; height:100%; 
        position:fixed; left:0; top:0; 
        border-collapse:collapse; 
        background:black; opacity:0.8; 
        display:none;
}
</style>

<table id="popBox">
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td id="popBox_container"></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
</table>

У меня есть непрозрачность таблицы: 0,8

внутри этой таблицы одна из непрозрачности td должна быть 1

это любой способ очистить задание td в другой непрозрачности?

потому что в этой таблице есть 9 td, я не хочу настраивать класс и вставлять 8 элементов

Ben 04 янв. 2014, в 07:52

Источник

Теги:

html

css

6 ответов

Ещё вопросы

user3159628 · Answer 1 · 2014-01-04T05-09-00.000Z

Непрозрачность не может быть изменена через наследование.

Лучше всего сделать это:

<table id="popBox">
  <tr>
    <td>Something</td>
    <td>Something</td>
    <td>Something</td>
  </tr>
  <tr>
    <td>Something</td>
    <td id="popBox_container">Unique</td>
    <td>Something</td>
  </tr>
  <tr>
    <td>Something</td>
    <td>Something</td>
    <td>Something</td>
  </tr>
</table>
<style type="text/css">
  #popBox td {
    opacity: 0.8;
  }
  #popBox #popBox_container {
    opacity: 1;
  }
</style>

JSFiddle Here

NoSense · Answer 2 · 2014-01-04T04-48-00.000Z

Я не знаю логики этого, но если вы хотите, например, установить 5-й td opacity 1 без использования дополнительных классов и идентификаторов, вы можете попытаться сделать это с помощью jQuery следующим образом:

$("td:eq(4)").css("opacity", "1");

Pranav C Balan · Answer 3 · 2014-01-04T03-36-00.000Z

Вы можете использовать псевдоселектора, такие как :nth-child() или :nth-of-type() т.д.

Попробуйте это

#popBox tr:nth-child(2) td:nth-child(1){
     opacity: 1;
}

FIDDLE

Подробнее об этих посещениях: здесь

+1, если автор не беспокоится о IE8 и более ранних

medBo · Answer 4 · 2014-01-04T04-19-00.000Z

если вы хотите, например, чтобы ваш td#popBox_container имел opacity: 1 просто добавьте стиль этого элемента после объявления стиля вашей таблицы:

<style>
#popBox{width:100%; height:100%; 
        position:fixed; left:0; top:0; 
        border-collapse:collapse; 
        background:black; opacity:0.8; 
        display:none;
}

#popBox #popBox_container{
   opacity: 1;
}
</style>

Tomas · Answer 5 · 2014-01-04T05-03-00.000Z

Если вы примените стиль opacity к родительскому #popBox, в этом случае #popBox, все дети наследуют стиль.

Ishan Jain · Answer 6 · 2014-01-04T04-52-00.000Z

Ребенок всегда наследует непрозрачность от своего родительского элемента. Непрозрачность на самом деле не унаследована в CSS. Это преобразование группы после рендеринга.

Вы можете использовать background-color с rgba вместо использования непрозрачности.

HTML:

<table id="popBox">
 <tr>
    <td>Your Content</td>
    <td>Your Content</td>
    <td>Your Content</td>
 </tr>
 <tr>
    <td>Your Content</td>
    <td id="popBox_container">Your Content</td>
    <td>Your Content</td>
 </tr>
 <tr>
    <td>Your Content</td>
    <td>Your Content</td>
    <td>Your Content</td>
 </tr>
</table>

CSS:

#popBox{
    background: rgba(0, 0, 0, 0.4);
}
#popBox td{
    border:1px solid black;
}

#popBox td#popBox_container {
    background: rgba(255, 0, 0, 1);
}

Попробуйте в скрипке

Для получения определенного столбца вы можете использовать псевдоселектора :nth-child() :first :last т.д....

Если мы хотим установить непрозрачность первого столбца в первую строку таблицы, вы можете использовать этот класс CSS:

#popBox tr:nth-child(1) td:nth-child(1) {
    background: rgba(0, 0, 0, 1);
    color:white;
}

Попробуйте в скрипке