Как выбрать первый тд первых двух строк с помощью css

#html #css #css-selectors #csscomb

#HTML #css #css-селекторы #csscomb

Вопрос:

Я думаю, это сложно. Давайте посмотрим, ошибаюсь ли я. Я хочу выбрать только тд, которые отмечены как «// для выбора» Я не хочу применять стили для любых других тд, кроме отмеченных. Пожалуйста, помогите!

 <table>
  <tbody>
    <tr>
     <td> // to be selected
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> // to be selected
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> // to be selected
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
  </tbody>
</table>

Заранее спасибо!

1. Как насчет того, чтобы добавить класс к td стилям, которые вы хотите применить?

2. Макет генерируется автоматически, и поэтому я не могу назначить ему класс CSS.

3. Использовать td для установки стилей для всех td элементов и использовать td td для сброса стилей для вложенных td элементов?

4. Сработало как шарм! Большое спасибо за решение.

5. Не могли бы вы отметить мой пост в качестве ответа, пожалуйста? Спасибо.

Ответ №1:

Используется td для установки стилей для всех td элементов и td td для сброса стилей для вложенных td элементов.

 td {
  // styles
}

td td {
  // styles to reset the nested elements
}

1. Это также окрасило бы все соседние ячейки TD, если бы система генерировала какие-либо

2. @KaraokeStu Почему это может быть проблемой?

3. Это не обязательно было бы проблемой, если только он не хотел, чтобы последующие TD были окрашены

Ответ №2:

Как предлагалось ранее (и, на мой взгляд, лучший вариант), вы можете добавить класс к td элементам, которые хотите выбрать, вы также можете выбрать их, используя спецификацию, используя путь к этим элементам.

 CSS    
table tbody tr td{
    /* your code here */
}

Ответ №3:

 var table = document.getElementsByTagName('table')[0]
let tbody = table.children[0];

let trs = tbody.children



for (let i = 0; i < trs.length; i  ){

  var tdhtml = trs[i].getElementsByTagName('td')[0].innerHTML 
  
  trs[i].getElementsByTagName('td')[0].innerHTML ='selected'   tdhtml
  
}

 <table>
  <tbody>
    <tr>
     <td> 1<!--to be selected-->
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> 2<!--to be selected-->
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> 3 <!-- to be selected-->
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
  </tbody>
</table>

Развернуть фрагмент

1. Невозможно использовать javascript. Я использую SAP Lumira, поэтому разрешены только пользовательские файлы CSS.

2. покажите нам остальную часть html для страницы

3. Javascript для этого излишен, плюс в итоге вы получаете страшную «вспышку браузера», когда javascript запускается и устанавливает стили

Ответ №4:

Вам нужно будет применить класс CSS к первому TD каждой строки в таблице самого высокого уровня следующим образом:

 /* Set all root TR's and the first TD element */
table>tbody>tr>td:first-child {
  background-color: yellow;
}

/* Reset so that this doesn't cascade */
table>tbody>tr>td:first-child td {
  background-color: inherit;
}

Пример здесь:
https://jsfiddle.net/0utqvhy6 /