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

样式选择器: 微信小程序界面设计-小程序中的WXSS(css)选择器在线视频教程-伪类选择器-:first-child伪类
时间：2019/1/14 20:20:02 作者：互联网来源：网络转载查看：54945 评论：0
内容摘要：伪类选择器-:first-child伪类通用语法定义和用法:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。浏览器支持所有主流浏览器都支持 :first-child 选择器。注释：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明...
伪类选择器-:first-child伪类

通用语法

定义和用法

: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>

效果图

小程序应用

Wxml代码



<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伪类微信小程序CSS高级选择器教程微信小程序界面布局设计入门课程 wxss中css入门在线视频课程
上一篇：微信小程序界面设计-小程序中的WXSS(css)选择器在线视频教程-伪类选择器-:first-of-type伪类
下一篇：微信小程序界面设计-小程序中的WXSS(css)选择器在线视频教程-伪类选择器-:disabled | :enabled 伪类

相关文章

相关评论

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

通用语法

定义和用法

浏览器支持

实例

效果图

小程序应用

Wxml代码

Wxss代码

效果图