1. 首页
  2. IT资讯

CSS 伪元素基础知识:first-line、first-letter、selection(三)

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Fb8dccf5e30ee4312befeb8f82b7fe41c” img_width=”480″ img_height=”270″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E除了::before 和::after,CSS 的伪元素还有::first-line、::first-letter 和::selection 这三个,这三个相对来说就简单得多,用法也较为纯粹。没看过前两篇文章的,笔者建议大家看看:u003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6724952951946740235u002F?group_id=6724952951946740235″ target=”_blank”u003ECSS 伪元素基础知识:before 与after (一)u003Cu002Fau003E、u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6725272220299428356u002F?group_id=6725272220299428356″ target=”_blank”u003ECSS 伪元素基础知识:content 与counter 实用技巧(二)u003Cu002Fau003Eu003Cu002Fpu003Eu003Ch1u003E::first-lineu003Cu002Fh1u003Eu003Cpu003E::first-line顾名思义就是「第一行」,通过这个伪元素可以轻松指定文字的第一行,需要注意的是::first-line 「不能」作用于display:inline的元素。以下面的例子,html里有一段文字如下所示:u003Cu002Fpu003Eu003Cpreu003E<p> 前端达人公众号,已经有五年的历史啦,目前有几千名前端开发者订阅,公众号的宗旨是:分享当下最实用的前端技术。关注前端达人,与数千名达人们一起进步!期待你的订阅和关注!u003Cbru003E<u002Fp>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003ECSS 只要这样写,页面呈现出来的第一行就会是绿色的,不论视窗如何缩放,只有第一行会是绿色的。u003Cu002Fpu003Eu003Cpreu003Ep::first-line{u003Cbru003E color:green;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F2a343e60712c499ba73da71b81e44717″ img_width=”1418″ img_height=”204″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E::first-letteru003Cu002Fh1u003Eu003Cpu003E::first-letter顾名思义就是「第一个字」,通过这个伪元素,可以做出许多文章第一个字放大或变色的效果,我们这里就用刚刚上面那段文字为例,把第一个字用下段的CSS 来做变化,就可以看到第一个字放大且变色了的效果。u003Cu002Fpu003Eu003Cpreu003Ep::first-letter{u003Cbru003E font-weight:bold;u003Cbru003E font-size:38px;u003Cbru003E color:red;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fd072fae369334723a79560731aa49091″ img_width=”1138″ img_height=”236″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E虽然把第一个字放大了,但排版上仍然有点乱没有美感,这时你可以加入line-height、float或padding等属性进行修正,经过修正后,你会惊喜的发现很像报纸杂志会出经常用的效果(第一个字会跨行显示)。u003Cu002Fpu003Eu003Cpreu003Ep::first-letter{u003Cbru003E font-weight:bold;u003Cbru003E font-size:38px;u003Cbru003E color:red;u003Cbru003E line-height:26px;u003Cbru003E float:left;u003Cbru003E padding:10px 5px 0 0;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F9a7a58e409854496b84a93a23eb4258d” img_width=”1132″ img_height=”188″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E不过很有趣的是,在实际应用的过程里,发现「有一些符号」是无法套用::first-letter 的,例如「『 {} [] 都不行,但如果后方加上其他文字或符号,又会跟着一起放大…( 到底是怎样? )u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F890595ec052a4eacbdcf234d78e488be” img_width=”1150″ img_height=”234″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E经过查询W3C的官网,发现了下面这段话,意思大概就是说网页里面有定义一些所谓「包覆式、点缀式的标点符号」,如果是这些包覆式的标点符号,基本上就无法放大,反而需要搭配其它字符进行使用,因此,在使用第一个字进行特殊变化时,就要注意有这种特殊状况会发生。u003Cu002Fpu003Eu003Cpu003E参考:https:u002Fu002Fwww.w3.orgu002FTRu002FCSS21u002Fselector.html#first-letteru003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fee53ac72b02b48b5a86a5c04caa28d25″ img_width=”677″ img_height=”229″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E::selectionu003Cu002Fh1u003Eu003Cpu003E::selection 是个十分常见的伪元素,它就是负责一段选取文字的效果,以下面这段CSS来说,选取后的文字,就会是深色背景,黄色文字。u003Cu002Fpu003Eu003Cpreu003Ep::selection{u003Cbru003E color:yellow;u003Cbru003E background:#543;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F887a2f812a014bc696fcf8c8c9e44453″ img_width=”1148″ img_height=”170″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002Fca054858-b260-4bd4-87c2-3cb054927442″ img_width=”1200″ img_height=”800″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E延伸阅读——用JavaScript操控伪元素u003Cu002Fh1u003Eu003Cpu003E虽然我们能用CSS操控伪元素,但因为伪元素不存在于网页元素内,所以无法通过JavaScript常规操控DOM的方式来修改或控制,不过JavaScript身为一个神通广大的编程语言,仍然是有方法可以办到的。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E读取伪元素属性u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E一般来说使用JavaScript读取某个元素DOM里的属性不难,但相对来说要读取一个不存在网页里的元素就不容易,如果要读取伪元素属性,可以通过getComputedStyle来获得,getComputedStyle是个可以获取当前元素「所有的CSS属性值」,读取后会返回一个Object CSSStyleDeclaration,而这个属性是只读的,无法进行修改。u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003E使用方法:window.getComputedStyle(‘元素’, ‘伪元素’)u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003E举例来说html 放入一个div 以及一个span,待会会用这个span 来显示div 的::before 属性。u003Cu002Fpu003Eu003Cpreu003E<div id=”d”>我是 div<u002Fdiv>u003Cbru003E<span id=”s”><u002Fspan>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003ECSS 的部分指定伪元素的content和color。u003Cu002Fpu003Eu003Cpreu003E#d::before{u003Cbru003E content:’伪元素的content ‘;u003Cbru003E color:red;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003EJavaScript使用window.getComputedStyle(d,’::before’)获取div里头伪元素使用的style,然后显示在span里面。u003Cu002Fpu003Eu003Cpreu003Evar d = document.getElementById(‘d’);u003Cbru003Evar s = document.getElementById(‘s’);u003Cbru003Evar b = window.getComputedStyle(d,’::before’);u003Cbru003Es.innerHTML = b.content +'<bru002F>’+b.color;u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E最后页面呈现的结果,第一段就是原本的div加上红色的伪元素文字,下方第一段是content的内容,紧接着是伪元素的颜色属性。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fcfc253628a1946d9ab10dd6bf55f24c6″ img_width=”484″ img_height=”184″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E修改伪元素属性u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们可以读取属性值也就一定要尝试修改,不过修改伪元素的属性其实比想像中的难,必须通过insertRule这个方法在指定的style里插入「预设的规则」,让这个规则去影响伪元素的属性表现。u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003E用法:style 标签元素.insertRule(样式规则, 0)u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003E举例来说我们的网页布局如下,一开始开头的部分有两组style,第一组是我们赋予元素的样式属性,第二组则是要来定义规则的style,因为要加入规则,所以让第二组style有一个id。至于html就放入一个div。u003Cu002Fpu003Eu003Cpreu003E<!DOCTYPE html>u003Cbru003E<html>u003Cbru003E<head>u003Cbru003E <meta charset=”utf-8″>u003Cbru003E <meta name=”viewport” content=”width=device-width”>u003Cbru003E <title>JS Bin<u002Ftitle>u003Cbru003E <style>u003Cbru003E #d::before{u003Cbru003E content:’伪元素的 content ‘;u003Cbru003E color:red;u003Cbru003E }u003Cbru003E <u002Fstyle>u003Cbru003E <style id=”css”><u002Fstyle>u003Cbru003E<u002Fhead>u003Cbru003E<body>u003Cbru003E <div id=”d”>我是div<u002Fdiv>u003Cbru003E<u002Fbody>u003Cbru003E<u002Fhtml>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在完全没有编写JavaScript的状态,应该会呈现如下图的样子:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fc34de1adba104cc18decdc8c89065697″ img_width=”444″ img_height=”116″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EJavaScript开声明一个变量css,通过id获取style,然后使用在指定一个变量给css.sheet,就可以通过insertRule的方法修改了。需要注意的是,由于规则加入时会放在整串style的开头(第二个值预设0 ),所以纯粹使用一个#d是无法覆盖原本的属性( CSS权重问题),所以这边使用#d#d两次,就可以在权重上压过原本的属性。(当然如果要用!important也是可以)u003Cu002Fpu003Eu003Cpreu003Evar css = document.getElementById(‘css’);u003Cbru003Evar d = document.getElementById(‘d’);u003Cbru003Evar c = css.sheet;u003Cbru003Ec.insertRule(“#d#d::before{content:’我是修改的 content ‘;}”, 0);u003Cbru003Ec.insertRule(“#d#d::before{color:blue;}”, 0);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E如此一来,呈现出来的效果就是通过JavaScript修改的。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F0ed517b96a1c4e53a9d7222e52437108″ img_width=”454″ img_height=”122″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E修改伪元素contentu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们知道::before和::after的content可以通过attr获取父元素的属性,因此通过改变这个属性,就能间接连带改变content的内容,举例来说有个div,我们指定它的data-text=”我是预设文字”,然后放两个按钮,期望点选不同的按钮,会更换content不同的内容。u003Cu002Fpu003Eu003Cpreu003E<button id=”b1″>显示 ABC<u002Fbutton>u003Cbru003E<button id=”b2″>显示 123<u002Fbutton>u003Cbru003E<div data-text=”我是预设文字”>我是 div<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E接着设定CSS,关键在使用content的attr,让伪元素直接显示父元素属性的内容。u003Cu002Fpu003Eu003Cpreu003Ebutton{u003Cbru003E font-size:16px;u003Cbru003E}u003Cbru003Ediv{u003Cbru003E margin:10px;u003Cbru003E font-size:20px;u003Cbru003E}u003Cbru003Ediv::before{u003Cbru003E content: attr(data-text) ‘,’;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E最后就是JavaScript的部分,通过setAttribute更改div的属性,就会看到content的内容修改了。u003Cu002Fpu003Eu003Cpreu003Evar b1 = document.getElementById(‘b1’);u003Cbru003Evar b2 = document.getElementById(‘b2’);u003Cbru003Evar d = document.querySelector(‘div’);u003Cbru003Eb1.addEventListener(‘click’,function(){u003Cbru003E d.setAttribute(‘data-text’,’ABC’);u003Cbru003E});u003Cbru003Eb2.addEventListener(‘click’,function(){u003Cbru003E d.setAttribute(‘data-text’,’123′);u003Cbru003E});u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F8acb86fa72b34be08a422814e073af42″ img_width=”904″ img_height=”406″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E虽然说我们可以通过JavaScript 来操控伪元素,但伪元素终究不是真正的网页元素,也因此操作起来也不如基本操作网页元素DOM 来的简便,所以如果可以,还是尽量用正常的操控模式吧。u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003E文章来源:https:u002Fu002Fwww.oxxostudio.twu002Farticlesu002F201706u002Fpseudo-element-3.htmlu003Cu002Fpu003Eu003Cpu003Ehttps:u002Fu002Fwww.oxxostudio.twu002Farticlesu002F201706u002Fpseudo-element-4.htmlu003Cu002Fpu003Eu003Cpu003E原文作者:oxxostudiou003Cu002Fpu003Eu003Cpu003E由于网页为繁体内容,术语描述和话术与我们有差异的问题,笔者在保证不改变原意的基础上做了调整,把上述两篇文章合成了一篇,并在此基础上进行了错误校正,如发现问题,欢迎你的指正u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Ch1u003E小结u003Cu002Fh1u003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fdfic-imagehandleru002F0b4e6e7a-5323-48e6-8cbd-783434989521″ img_width=”1023″ img_height=”681″ alt=”CSS 伪元素基础知识:first-line、first-letter、selection(三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E关于伪元素的系列文章就介绍到这里,如果你喜欢此系列文章,麻烦各位点赞和转发,谢谢啦。关于伪元素的用法,虽然说大部分的时候用不太到,但某些时候也不失为强化网页效果、或是优化网页结构的好方法。u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:CSS 伪元素基础知识:first-line、first-letter、selection(三)

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10724.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code