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

样式选择器: 微信小程序界面设计-小程序中的WXSS(css)选择器在线视频教程-伪元素选择器-::first-letter伪元素
时间：2019/1/16 13:03:31 作者：互联网来源：网络转载查看：55109 评论：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

浏览器支持

所有主流浏览器都支持 :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>

效果图

小程序应用

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

相关文章

相关评论

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

定义和用法

浏览器支持

实例

效果图

小程序应用

Wxml代码

Wxss代码

效果图