综合教程

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

时间:2019/1/16 13:03:31  作者:互联网  来源:网络转载  查看:54767  评论:0
内容摘要:伪元素选择器-::first-letter伪元素定义和用法 :first-letter 选择器用于选取指定选择器的首字母。注释:以下属性可与 :first-letter 使用: 字体属性 颜色属性 背景属性...
伪元素选择器-::first-letter伪元素

定义和用法

 

:first-letter 选择器用于选取指定选择器的首字母。

注释:以下属性可与 :first-letter 使用:

 字体属性
 颜色属性
 背景属性
 外边距属性
 内边距属性
 边框属性
 text-decoration
 vertical-align(只有在 float 为 'none' 时)
 text-transform
 line-height
 float
 clear

浏览器支持


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

实例

选择每个 <p> 元素的首字母,并为其设置样式:

<!DOCTYPE html>

<html>

<head>

<style>

p:first-letter

{

font-size:200%;

color:#8A2BE2;

}

</style>

</head>

<body>

 

<h1>Welcome to My Homepage</h1>

<p>My name is Donald.</p>

<p>I live in Duckburg.</p>

<p>My best friend is Mickey.</p>

 

</body>

</html>

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



小程序应用

Wxml代码

<view>huang ju hua</view>

<view>黄菊华老师</view>

 

<text>huang ju hua</text>

 

<view>

  <text>huang ju hua</text>

</view>

Wxss代码

view::first-letter{

  color: red;

  font-size: x-large;

}

 

text::first-letter

{

  color: red;

}

效果图

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

欢迎大家收看我的视频课程:微信小程序界面设计-小程序中的WXSS(css)选择器
微信小程序界面设计-小程序中的WXSS(css)选择器在线视频教程-伪元素选择器-::selection伪元素



相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |