微信小程序界面设计小程序中的WXSS(css)选择器课程-::first-line 伪元素

最新推荐文章于 2024-07-06 22:23:57 发布

黄菊华老师

最新推荐文章于 2024-07-06 22:23:57 发布

阅读量988

点赞数

分类专栏：视频教程微信小程序-样式-wxss-css 文章标签：微信小程序界面设计小程序中的WXSS(css)选择器课程-::firs ::first-line 伪元素

本文链接：https://blog.csdn.net/u013818205/article/details/86607489

版权

视频教程同时被 2 个专栏收录

184 篇文章 2 订阅

订阅专栏

微信小程序-样式-wxss-css

101 篇文章 4 订阅

订阅专栏

小程序中的WXSS(css)选择器课程-::first-line 伪元素

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

定义和用法
:first-line 选择器用于选取指定选择器的首行。
注释：以下属性可与 :first-line 使用：
 字体属性
 颜色属性
 背景属性
 word-spacing
 letter-spacing
 text-decoration
 vertical-align
 text-transform
 line-height
 clear
浏览器支持
在这里插入图片描述

所有主流浏览器都支持 :first-line 选择器。
实例
选择每个

元素的首行，并为其设置样式：

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>WWF's Mission Statement</h1>
<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
</body>
</html>

效果图
在这里插入图片描述
黄菊华老师的课程和资料

小程序应用

Wxml代码

<view>
  To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature
</view>

<view>
  黄菊华老师，浙江杭州余杭区，在平台查询老师名字就可以查询到老师的课程！
</view>

<text>
  To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature
</text>

<view>
  <text>
  黄菊华老师，浙江杭州余杭区，在平台查询老师名字就可以查询到老师的课程！
  </text>
</view>

Wxss代码

view::first-line{
  color:red;
}

text::first-line
{
  color: green;
}

效果图
在这里插入图片描述

欢迎大家学习我的视频课程：微信小程序界面设计-小程序中的WXSS(css)选择器课程

微信小程序界面设计小程序中的WXSS(css)选择器课程-::first-line 伪元素

黄菊华老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录