HTML Таблица вложенных селекторов - PullRequest
Новая
       36

HTML Таблица вложенных селекторов

0 голосов
/ 19 февраля 2020

Я хочу выбрать определенную ячейку внутри группы и не могу понять, как. Ниже приведен пример: 

table {
  position:relative;
  top:50px;
  margin:0 auto;
  border-collapse:collapse;
}

td, th {
  border:1px solid black;
  width:75px;
  height:25px;
}

.first {
  background-color:red;
}

.second {
  background-color:yellow;
}

.third {
  background-color:green;
}

.cell {
  background-color:white;
}

.first .cell {
  text-align:left;
  border:5px solid black;
  color:red;
}

.second > .cell {
  text-align:center;
  border:5px solid black;
  color:red;
}

.third .cell {
  text-align:right;
  border:5px solid black;
  color:red;
}
<table>
  <colgroup>
    <col span=2 class='first'>
    <col span=2 class='second'>
    <col span=2 class='third'> 
  </colgroup>
  <thead>
    <th colspan=6>asdad</th>
  </thead>
  <tbody>
    <tr>
      <th>asdad</th>
      <td class='cell'>One</td>
      <th>asdad</th>
      <td>fghfghf</td>
      <th>sdadsad</th>
      <td>yututu</td>
    </tr>
        <tr>
      <th>asdad</th>
      <td>jhkjhk</td>
      <th>asdad</th>
      <td class='cell'>Two</td>
      <th>sdadsad</th>
      <td>yututu</td>
    </tr>
    <tr>
      <th>asdad</th>
      <td>jhkjhk</td>
      <th>asdad</th>
      <td>fghfghf</td>
      <th>sdadsad</th>
      <td class='cell'>Three</td>
    </tr>
  </tbody>
</table>

Я пробовал большинство селекторов формы здесь , но, похоже, они не работают. Как я могу добиться того, чего хочу? Я также хотел бы выбрать элементы #cell, используя Javascript или Jquery. $('.first #cell') тоже не работает. $('.first').find('#cell') также не удалось.

1 Ответ

0 голосов
/ 19 февраля 2020

Прежде всего, идентификаторы должны использоваться только один раз на странице. Это концепция идентификаторов: быть уникальным. Так что идея «найти первый случай #cell» странная.

Если у вас есть возможность присвоить идентификаторы ячейкам таблицы, которые вы хотите выбрать, все очень просто: выберите их по их уникальному идентификатору : 

#cell1
#cell2
#cell3
…

То же самое в jQuery: 

$('#cell1')
$('#cell2')
$('#cell3')
…

Но если вы хотите выбрать определенную ячейку без идентификатора (или класса), все может быть немного сложнее. Может быть, вы можете попробовать nth-child-selector. https://www.w3schools.com/cssref/sel_nth-child.asp

...