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。

猜你喜欢

转载自blog.csdn.net/fyyyr/article/details/80324574
今日推荐