小程序样式课程-第3课-id选择器和派生选择器_小程序CSS入门_前端样式教程

小程序CSS入门: 小程序样式课程-第3课-id选择器和派生选择器
时间：2018/12/20 13:32:46 作者：互联网 来源：网络转载 查看：2758 评论：0
内容摘要：在现代布局中，id 选择器常常用于建立派生选择器。#sidebar p { font-style: italic; text-align: right; &nbs...
在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {

 font-style: italic;

 text-align: right;

 margin-top: 0.5em;

}

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如 或者 ，不过这样的用法是非法的，因为不可以在内联元素 中嵌入 。

一个选择器，多种用法

即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

#sidebar p {

 font-style: italic;

 text-align: right;

 margin-top: 0.5em;

}

#sidebar h2 {

 font-size: 1em;

 font-weight: normal;

 font-style: italic;

 margin: 0;

 line-height: 1.5;

 text-align: right;

}

在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。

1.2.3 id 选择器和派生选择器-小程序应用

我们尝试用上小节的知识点来实现：让view组件里面的所有text文本显示为红色。

Wxml代码

<view>

<text>普通文本</text>

<text id="myid">ID选择器里面的文本</text>

</view>

<view id="myid2">

<text>普通文本</text>

</view>

Wxss代码

/* 元素选择器 */

page{

background-color: gainsboro;

}

view{

background-color: aliceblue;

}

/* id选择器 */

#myid{

color: white;background-color: black;

}

#myid2 text{

color:red;

}

效果如下图

欢迎大家支持我的视频课程：微信小程序样式开发入门

标签：微信小程序id 选择器微信小程序派生选择器微信小程序wxss样式入门教程
上一篇：小程序样式课程-第4课-类选择器语法
下一篇：小程序样式课程-第2课-样式基础-id选择器

相关文章

相关评论

小程序样式课程-第3课-id选择器和派生选择器

1.2.3 id 选择器和派生选择器-小程序应用

Wxml代码

Wxss代码