weex组件的样式：不可使用间接筛选器

weex本身自带了很多vue中没有的组件，例如<text>等。

这些组件，也有规定好的样式，所以理论上其样式的设置方式与常规的html元素没有区别。例如：

<div id="theDiv">
    <text id="theText" style="color: white;">simple</text>
</div>

上面将<text>的文本颜色设置为白色。

 

然而，实际上weex这些组件是用各种html元素组合而成的。所以这些组件实际渲染时会被还原为各种html元素。

这带来的一个问题就是，若使用间接筛选器为<text>的文本设置颜色：

<style scoped>
    #theDiv text{
        color: white;
    }
</style>

会发现<text>的颜色并没有改变。这是因为实际页面上根本没有<text>这个元素，<text>已经被还原成一堆<div>和<p>了。页面找不到<text>元素，于是间接筛选器也就不生效。

不过，由于知道<text>还原出的元素中，最关键的文本显示由<p>负责，所以：

<style scoped>
    #theDiv p{
        color: white;
    }
</style>

这样是生效的。但并不推荐使用这种方式。

 

正确的修改方式为：

1.    像上面的例子一样，直接在<text>元素中修改style属性。

2.    为<text>定义直接筛选器，例如上面的id="theText"，然后在<style>中用直接筛选器设置。

<style scoped>
    #theText{
        color: white;
    }
</style>

3.    定义一个特定的class，<text>直接使用该class。