如何使用 <td> 选择器更改嵌套在 <div> 元素中的 <div> 元素的颜色？ [重复]

问题描述 投票：0回答：2

我正在创建歌曲的 HTML 文档（特别是 kPop），并对歌手的歌词进行颜色编码。

最初，我向 元素添加类，这确实有效。但我想看看我是否可以进一步简化所需的输入量。 元素已经嵌套在

元素中，根据它们属于歌曲的哪个部分（verse1、chorus1 等）来组织它们。

对于我的生活，当我选择 元素的类时，我无法弄清楚如何让 css 选择器将样式应用于

元素。

这是我目前拥有的，并且可以正确地为歌词着色：

<table>
   <thead>
      <th>Romanization</th>
      <th>Hangul</th>
      <th>English</th>
   </thead>
   <tbody>
      <--! Verse 1-->
      <div class='v1'>
         <tr class='liz'>
            <td>Jipjunghae nun gamgo daeum sungan</td>
            <td>집중해 눈 감고 다음 순간</td>
            <td>Focus, the moment after you close your eyes</td>
         </tr>
         <tr class='liz'>
            <td>Meorissogeul maemdoneun merry go round</td>
            <td>머릿속을 맴도는 merry go round</td>
            <td>A merry go round spinning in your head</td>
         </tr>
         <tr class='leeseo'>
            <td>Muishik sogeuro fallin’ down</td>
            <td>무의식 속으로 fallin’ down</td>
            <td>Fallin’ down into the unconscious</td>
         </tr>
         <tr class='leeseo'>
            <td>Dansume ppajyeodeulji</td>
            <td>단숨에 빠져들지</td>
            <td>You’ll fall for me instantly</td>
         </tr>
      </div>
   </tbody>
</table>

我理想中想要完成的事情是这样的：

编辑：感谢您告诉我 

<div>
不能在表内使用，我不知道它们不会被解析。有没有更好的方法来组织 
<tr>
元素，这样我就可以减少我的 
<tr>
元素包含的类的数量？

<table>
   <thead>
      <th>Romanization</th>
      <th>Hangul</th>
      <th>English</th>
   </thead>
   <tbody>
      <--! Verse 1-->
      <div class='v1'>
         <div class='liz'>
            <tr>
               <td>Jipjunghae nun gamgo daeum sungan</td>
               <td>집중해 눈 감고 다음 순간</td>
               <td>Focus, the moment after you close your eyes</td>
            </tr>
            <tr>
               <td>Meorissogeul maemdoneun merry go round</td>
               <td>머릿속을 맴도는 merry go round</td>
               <td>A merry go round spinning in your head</td>
            </tr>
         </div>
         <div class='leeseo'>
            <tr>
               <td>Muishik sogeuro fallin’ down</td>
               <td>무의식 속으로 fallin’ down</td>
               <td>Fallin’ down into the unconscious</td>
            </tr>
            <tr>
               <td>Dansume ppajyeodeulji</td>
               <td>단숨에 빠져들지</td>
               <td>You’ll fall for me instantly</td>
            </tr>
         </div>
      </div>
   </tbody>
</table>

我当前的 CSS 看起来像这样，它非常准系统但有效：

.liz {
    color: teal
}

.wonyoung {
    color: red
}

.rei {
    color: green
}

.gaeul {
    color: blue
}

.yujin {
    color: pink
}

.leeseo {
    color: yellow
}

我试过以下 CSS 选择器：

.liz {
    color: pink
}

.liz td {
    color: pink
}

.liz tr td {
    color: pink
}

我对继承做了一些研究，看看我是否可以让 元素从

元素继承颜色属性，但主要弹出的是这样的继承链如何违背 W3 最佳实践。

因为这纯粹是为了我自己（我将把它们存储在 Obsidian 中，它以标记和 HTML 显示注释），我想看看我想要完成的事情是否 even 可能。理想情况下，不使用 Javascript。

你可以给出会影响TD的tr类，如果你愿意，你也可以直接引用tds。

Div 不允许成为 tr、tbody、table 或 thead 的子级。

.liz {
    color: pink
}

.leeseo {
    color: red
}
<table>
   <thead>
      <th>Romanization</th>
      <th>Hangul</th>
      <th>English</th>
   </thead>
   <tbody>
            <tr class="liz v1">
               <td>Jipjunghae nun gamgo daeum sungan</td>
               <td>집중해 눈 감고 다음 순간</td>
               <td>Focus, the moment after you close your eyes</td>
            </tr>
            <tr class="liz v1">
               <td>Meorissogeul maemdoneun merry go round</td>
               <td>머릿속을 맴도는 merry go round</td>
               <td>A merry go round spinning in your head</td>
            </tr>
            <tr class='leeseo v1'>
               <td>Muishik sogeuro fallin’ down</td>
               <td>무의식 속으로 fallin’ down</td>
               <td>Fallin’ down into the unconscious</td>
            </tr>
            <tr class='leeseo v1'>
               <td>Dansume ppajyeodeulji</td>
               <td>단숨에 빠져들지</td>
               <td>You’ll fall for me instantly</td>
            </tr>
   </tbody>
</table>

首先，如评论中所述：

您不能将 

<div>
直接嵌套在 
<tbody>
中。它们将被解析器剥离。

<table>
s 具有相当严格的结构，并被 HTML 阅读器解析为：

<table>
    <thead>
        <th>
            <tr>
                <td>
    <tbody>
        <tr>
           <td>

上面的确切布局有很多变化，但关键是你不能添加非表格标记within表格结构，只能在端点元素内添加; 

<td>
.

您还可以阅读 MDN 上的 CSS 继承。

现在，回答你的问题；你可以使用 HTML5 数据元素来标记哪些部分应该被赋予哪些颜色。

table tbody {
  background-color: #ccc;
}

tr[data-singer='liz'] {
  color: teal;
}

tr[data-singer='leeseo'] {
  color:yellow;
}
<table>
<thead>
  <th>Romanization</th>
  <th>Hangul</th>
  <th>English</th></thead>
<tbody>
     <tr data-singer='liz'>
               <td>Jipjunghae nun gamgo daeum sungan</td>
               <td>집중해 눈 감고 다음 순간</td>
               <td>Focus, the moment after you close your eyes</td>
            </tr>
            <tr data-singer='liz'>
               <td>Meorissogeul maemdoneun merry go round</td>
               <td>머릿속을 맴도는 merry go round</td>
               <td>A merry go round spinning in your head</td>
            </tr>
            <tr data-singer='leeseo'>
               <td>Muishik sogeuro fallin’ down</td>
               <td>무의식 속으로 fallin’ down</td>
               <td>Fallin’ down into the unconscious</td>
            </tr>
            <tr data-singer='leeseo'>
               <td>Dansume ppajyeodeulji</td>
               <td>단숨에 빠져들지</td>
               <td>You’ll fall for me instantly</td>
            </tr>
</tbody>
</table>

您可以根据需要添加任意数量的

data-
属性，例如有哪节经文（例如
data-verse='1'
），您可以单独使用CSS以类似的方式引用这些。

有关使用 data- 属性的更多详细信息，请参阅此相关问答

。

    




html

css

css-selectors

css-tables


2个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        


你可以给出会影响TD的tr类，如果你愿意，你也可以直接引用tds。


Div 不允许成为 tr、tbody、table 或 thead 的子级。






.liz {
    color: pink
}

.leeseo {
    color: red
}


<table>
   <thead>
      <th>Romanization</th>
      <th>Hangul</th>
      <th>English</th>
   </thead>
   <tbody>
            <tr class="liz v1">
               <td>Jipjunghae nun gamgo daeum sungan</td>
               <td>집중해 눈 감고 다음 순간</td>
               <td>Focus, the moment after you close your eyes</td>
            </tr>
            <tr class="liz v1">
               <td>Meorissogeul maemdoneun merry go round</td>
               <td>머릿속을 맴도는 merry go round</td>
               <td>A merry go round spinning in your head</td>
            </tr>
            <tr class='leeseo v1'>
               <td>Muishik sogeuro fallin’ down</td>
               <td>무의식 속으로 fallin’ down</td>
               <td>Fallin’ down into the unconscious</td>
            </tr>
            <tr class='leeseo v1'>
               <td>Dansume ppajyeodeulji</td>
               <td>단숨에 빠져들지</td>
               <td>You’ll fall for me instantly</td>
            </tr>
   </tbody>
</table>







    

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        


首先，如评论中所述：




您不能将 
<div>
 直接嵌套在 
<tbody>
 中。它们将被解析器剥离。




<table>
s 具有相当严格的结构，并被 HTML 阅读器解析为：


<table>
    <thead>
        <th>
            <tr>
                <td>
    <tbody>
        <tr>
           <td>



上面的确切布局有很多变化，但关键是你不能添加非表格标记within表格结构，只能在端点元素内添加; 
<td>
.


您还可以阅读 MDN 上的 CSS 继承。




现在，回答你的问题；你可以使用 HTML5 数据元素来标记哪些部分应该被赋予哪些颜色。






table tbody {
  background-color: #ccc;
}

tr[data-singer='liz'] {
  color: teal;
}

tr[data-singer='leeseo'] {
  color:yellow;
}


<table>
<thead>
  <th>Romanization</th>
  <th>Hangul</th>
  <th>English</th></thead>
<tbody>
     <tr data-singer='liz'>
               <td>Jipjunghae nun gamgo daeum sungan</td>
               <td>집중해 눈 감고 다음 순간</td>
               <td>Focus, the moment after you close your eyes</td>
            </tr>
            <tr data-singer='liz'>
               <td>Meorissogeul maemdoneun merry go round</td>
               <td>머릿속을 맴도는 merry go round</td>
               <td>A merry go round spinning in your head</td>
            </tr>
            <tr data-singer='leeseo'>
               <td>Muishik sogeuro fallin’ down</td>
               <td>무의식 속으로 fallin’ down</td>
               <td>Fallin’ down into the unconscious</td>
            </tr>
            <tr data-singer='leeseo'>
               <td>Dansume ppajyeodeulji</td>
               <td>단숨에 빠져들지</td>
               <td>You’ll fall for me instantly</td>
            </tr>
</tbody>
</table>








您可以根据需要添加任意数量的
data-
属性，例如有哪节经文（例如
data-verse='1'
），您可以单独使用CSS以类似的方式引用这些。


有关使用 data- 属性的更多详细信息，请参阅此相关问答
。

    

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.