ｃｓｓ换肤ｄｅｍｏ

css多类选择器在react项目中的应用

<div class="a">
	<tr class="b1">第一个tr标签</tr>
	<tr class="b2">第二个tr标签</tr>
	<tr class="b3">第三个tr标签</tr>
</div>

一、我想让tr标签的背景色变为红色，字体变为绿色有几种方法？

1.css子类选择器

div.a > tr{
backgound-color:‘red’ !important;
color:‘green’ !important;
}
将class为a的div所有子元素的背景色变为红色，字体变为绿色。

2.css多类选择器
.a .b1,.b2,.b3{
backgound-color:‘red’ !important;
color:‘green’ !important;
}
将class为a的div的class为b1,b2,b3的元素的背景色变为红色，字体变为绿色。

二、我想点击一个按钮之后才让tr标签的背景色变为红色，字体变为绿色有几种方法？
1.写个css后再添加class
css部分
.change > tr{
backgound-color:‘red’ !important;
color:‘green’ !important;
}
js部分
document.getElementsByClassName(‘a’).setAttribute(‘class’,‘a’+’ ‘+‘change > tr’)
获取class为a的dom元素然后将其class改为 a change，然后上述css样式就用到了tr上。
２.使用innerHTML
let styleObject = document.createElement(‘style’)
styleObject .innerHTML = ‘div.a > tr{
backgound-color:‘red’ !important;
color:‘green’ !important;
}’
let styleObj = document.getElementsByTagName(’'head)[0]
styleObj.appendChild(styleObject )
推荐第二种方法，它是创建了一个style，而且这个style也可以通过removeChild删除style