指定相同的CSS类到多个标签

这似乎很简单，但我还无法找到解决方案。如果我想将引导类应用于标记的所有子类（例如下面的特定类型，例如<td>），有没有办法做到这一点，而无需为每个子标记单独指定它？我已经通过其他SO帖子进行了搜索，但是其中许多人都在讨论将相同样式应用于CSS的所有子元素，但我不想直接在CSS中应用有效样式，因为这将是多余的（因为已经存在pre-定义的类，我想要适用于所有子标签，理想情况下）。指定相同的CSS类到多个标签

例如：

如果我需要<td class="text-right">的每一个细胞都在第一列中，我所要做的：

有没有办法做到这一点更模块化的方式？我知道我们不能在另一个CSS内引用一个CSS类，否则上面的操作很简单。

来源

2017-02-13 Anupam

是你需要什么？：'。表TR> TD：第一孩子{文本对齐：权利;}' – Banzay

没有，正如我所说，我不想要直接应用有效的造型。我试图找出是否有办法将一个类应用于元素的所有子元素（而不是在每个子元素中重复）。以上只是一个例子。我还在第一列的每个单元格中都有一些文本，并且面临同样的问题。 – Anupam

如果你正好需要应用类（不只是CSS样式），你应该使用JS。像这样（jQuery的）东西：

$('table tr td:first-child').addClass('text-right').attr('valign','middle');

来源

2017-02-13 08:55:16

好的。 JS是唯一的方法吗？我正在使用React，并可以尝试通过该方法添加该类。我这样做主要是为了代码模块化和可维护性。 – Anupam

“class”属性是DOM元素属性。你不能从CSS访问它们，但是你可以从JS访问它们。使用React，没关系。 –

如果你正在试图做的是应用对齐样式 - 你不需要一个类 - 你可以用CSS来做 - 请注意，我添加了一个水色背景来突出显示效果（难以看清在这个小样本表中）。

编辑 - 我已经定下了我的回答，以适应OP的情况 - 迭代在.TT中的每个tr，然后找到其中的第一个TD并应用addClass（）。

}）

$(document).ready(function(){ 
 
    $('.table tr').each(function(){ 
 
    $(this).find('td:first').addClass('text-right'); 
 
    }) 
 
})

.table tr td{ 
 
    width:100px 
 
    
 
} 
 

 
.text-right{ 
 
    text-align:right; 
 
    background:aqua 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <tr> 
 
    <td valign="middle">test 1</td> 
 
    <td valign="middle">test 2</td> 
 
    <td valign="middle">test 3</td> 
 
    </tr> 
 
    <tr> 
 
    <td valign="middle">test 1</td> 
 
    <td valign="middle">test 2</td> 
 
    <td valign="middle">test 3</td> 
 
    </tr> 
 
    <tr> 
 
    <td valign="middle">test 1</td> 
 
    <td valign="middle">test 2</td> 
 
    <td valign="middle">test 3</td> 
 
    </tr> 
 
</table>

来源

2017-02-13 08:50:10 gavgrif

嗨 - 更新我的答案适合 - 迭代每个tr并找到第一个td - 并添加类。我将背景换成了aqua以突出显示。 – gavgrif

指定相同的CSS类到多个标签

回答

相关问题