微信小程序样式-id选择器的使用教程

古城微笑少年丶 2024-02-19 15:24 54阅读 0赞

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

**单独的选择器**  
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。  
id 选择器以 “\#” 来定义。  
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
    #green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>

 注意：id 属性只能在每个 HTML 文档中出现一次。

**单独的选择器-小程序应用**  
**Wxml代码**

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

**Wxss代码**

/* 元素选择器 */
    page{
      background-color:  gainsboro;
    }
    view{
     background-color:  aliceblue;
    }
    /* id选择器 */
    #myid{
      color: white;background-color: black;
    }

效果如下图  
![在这里插入图片描述][20190105104809957.png]

[欢迎大家收看我的视频课程 ： 微信小程序界面设计-样式入门到精通][_ _-]  
![微信小程序界面设计-样式入门到精通][-]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190105104809957.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/201655a88d7448c89e8e8a7bdbde3f93.png
[_ _-]: https://ke.qq.com/course/368613?tuin=2b10d56
[-]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2995974294cf43f6bed5805bdf22ee03.png