综合教程

微信小程序界面设计-小程序中的WXSS(css)选择器在线视频教程-伪类选择器-:first-child伪类

时间:2019/1/14 20:20:02  作者:互联网  来源:网络转载  查看:54772  评论:0
内容摘要:伪类选择器-:first-child伪类通用语法定义和用法:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。浏览器支持所有主流浏览器都支持 :first-child 选择器。注释:对于 IE8 及更早版本的浏览器中的 :first-child,必须声明...
伪类选择器-:first-child伪类

通用语法

定义和用法

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

浏览器支持

微信小程序界面设计-小程序中的WXSS(css)选择器在线视频教程-伪类选择器-:first-child伪类
所有主流浏览器都支持 :first-child 选择器。

注释:对于 IE8 及更早版本的浏览器中的 :first-child,必须声明 <!DOCTYPE>

实例

选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式:

<!DOCTYPE html>

<html>

<head>

<style>

p:first-child

{

background-color:yellow;

}

</style>

</head>

<body>

 

<p>这个段落是其父元素(body)的首个子元素。</p>

 

<h1>欢迎访问我的主页</h1>

<p>这个段落不是其父元素的首个子元素。</p>

 

<div>

<p>这个段落是其父元素(div)的首个子元素。</p>

<p>这个段落不是其父元素的首个子元素。</p>

</div>

 

<p><b>注释:</b>对于 IE8 及更早版本的浏览器中的 :first-child,必须声明 <!DOCTYPE></p>

 

</body>

</html>

效果图
微信小程序界面设计-小程序中的WXSS(css)选择器在线视频教程-伪类选择器-:first-child伪类



小程序应用

Wxml代码

<!--view:first-child 选择属于父组件的第一个子元素的每个view组件-->

<view>文本文字,红色</view>

 

<view>

  <text>文本文字,颜色不变</text>

</view>

 

<view>

  01,颜色不变

  <view>文本文字,红色</view>

</view>

 

<view>

  <text>文本文字,颜色不变</text>

  <view>文本文字,颜色不变</view>

</view>

 

<view>

  <view>文本文字,红色</view>

  <view>文本文字,颜色不变</view>

  <text>文本文字,颜色不变</text>

</view>

Wxss代码

view:first-child{

  color: red;

}

效果图

微信小程序界面设计-小程序中的WXSS(css)选择器在线视频教程-伪类选择器-:first-child伪类


欢迎大家收看我的视频课程:微信小程序界面设计-小程序中的WXSS(css)选择器
微信小程序界面设计-小程序中的WXSS(css)选择器在线视频教程-伪元素选择器-::selection伪元素
相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |