微信小程序样式入门到精通(wxss)视频课程003-id 选择器和派生选择器

最新推荐文章于 2023-06-15 16:07:34 发布

weixin_33916256

最新推荐文章于 2023-06-15 16:07:34 发布

阅读量165

点赞数

原文链接：https://juejin.im/post/5ca2bd3be51d4514c01633b4

版权

在现代布局中，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 元素也得到了不同的特殊处理。

小程序应用

我们尝试用上小节的知识点来实现：让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;

}复制代码

效果如下图

微信小程序交流群：111733917

欢迎大家收看我的：微信小程序样式入门到精通(wxss,css)视频课程 https://ke.qq.com/course/368613?tuin=2b10d56

转载于:https://juejin.im/post/5ca2bd3be51d4514c01633b4