首页 > 其他分享 >css中,我想把文章的第一行设置单独的样式

css中,我想把文章的第一行设置单独的样式

时间:2024-10-22 16:50:23浏览次数:3  
标签:第一行 样式 单独 文章 选择器 css 页面

背景:

我想把文章的第一行设置单独的样式。

方式1:

我把第一行单独用一个p标签包裹。但是页面是响应式的,随着页面的缩放,第一行的文字被挤到第二行甚至第三行,

完全不符合我的需求。

于是,我思考,有没有什么css选择器,可以直接选中文章的第一行。

结果还真被我找到了。

/* 伪元素选择器,优先级:1 */
	p::first-line {
        font-weight: bold;
        color: red;
     }

查看效果符合需求。

标签:第一行,样式,单独,文章,选择器,css,页面
From: https://blog.csdn.net/lj_1598/article/details/143103447

相关文章

  • element-ui中,使用this.$message.success(“登录成功“),如何修改文字的样式呢?
    在element-ui中使用this.$message.success(“注册成功”);时,直接修改文字样式并没有暴露出很方便的接口,因为ElementUI的消息提示组件Message是通过JavaScript动态创建的。但是你可以通过以下方法自定义消息的样式:方法1:使用customClass属性ElementUI的Me......
  • easyExcel生成excel并导出自定义样式(三)指定列字体样式
    publicclassExcelRowColorHandlerimplementsCellWriteHandler{privatefinalIntegercolumnIndex;privatefinalSet<Integer>redRowIndex;privatefinalSet<Integer>yellowRowIndex;privatefinalSet<Integer>greenRowInd......
  • 研发都应该了解的如何在vite中接入现代化css工程化方案
    作者:京东物流刘微微背景好的css工程化方案可以增强我们项目的可维护性、提高样式的复用性、进行自动化处理等,在提高页面加载速度和性能的同时,我们可以有更多的精力进行js逻辑的处理。添加全局样式文件使用场景:有一个scss/less文件,此文件中定义了一些全局变量,需要在其他的......
  • Webpack5-css
    处理样式资源本章节我们学习使用Webpack如何处理Css、Less、Sass、Scss、Styl样式资源介绍Webpack本身是不能识别样式资源的,所以我们需要借助Loader来帮助Webpack解析样式资源我们找Loader都应该去官方文档中找到对应的Loader,然后使用官方文档找不到的话,可以从社......
  • 第六章 元素应用CSS
    6.1使用CSS设置字体样式font-family:设置字体的类型font-weight:设置字体的粗细font-size:设置字体的大小font-style:设置字体的倾斜6.1.1字体类型字体具有传递语义功能和美学效应两方面作用CSS提供font-family属性来控制文本的字体类型参数:字体名称按优先顺序排列,以逗......
  • HTML+CSS实现点赞效果
    效果演示HTML+CSS实现点赞效果HTML<divclass="heart-container"title="Like"><inputtype="checkbox"class="checkbox"id="Give-It-An-Id"><divclass="svg-container"><svgview......
  • 77.优美的鲜花网店网页 ​Web前端网页制作 大学生期末大作业 html+css+js
    目录一、前言二、网页文件三、网页效果四、代码展示1.HTML2.CSS3.JS五、更多推荐一、前言本实例以鲜花为主题设计,应用html+css+js,包括DIV布局、图片轮翻效果、菜单导航、二级三级菜单、留言板、搜索等,供大家参考。本网页支持如Dreamweaver、HBuilder、Text、Vscode......
  • CSS入门
    CSS层叠样式表样式表优点缺点使用情况控制范围行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少)内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面(中)外部样式表完全实现结构和样式相分离需要引入最多控制整个站点......
  • 第六章 元素应用CSS
    6.1使用CSS设置字体样式在学习HTML时,通常也会使用HTML,对文本字体进行一些非常简单的样式设置,而使用CSS对字体样式进行设置远比使用HTML灵活、精确得多。字体样式的常用属性属性说明属性说明font-family设置字体的类型font-welght设置字体的粗细font-size设置字体的......
  • CSS速刷 - 预处理器
    预处理器是什么?lessSass预处理器有啥功能?嵌套,反映了层级和约束变量和计算,减少了重复代码Extend和Mixin代码片段,就像具备同一个功能的函数。循环,适用于复杂有规律的样式importCSS文件模块化1.less嵌套Node写的,通过npm发布。&:同一层级2.Sass嵌套输出和less嵌套......