详解CSS 伪元素及Content 特性

日期:2021-03-17 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

初识伪元素

 说起伪元素我第1想起的莫过度::before和::after这两个了,它俩实际上便是在其附设的挑选器命里的元素上插进第1个子连接点和追加最终1个子连接点。那这时候我禁不住地想问:“立即加上两个class为.before和.after并不是1样的吗?”  实际上应用伪元素::before和::after下列两个益处:

1.HTML的编码量降低,对SEO有协助;

2.提升JavaScript查寻元素的高效率。

 那为何会这两益处呢?缘故便是伪元素其实不存在于DOM中,而是坐落于CSSOM,HTML编码和DOM Tree中均沒有它的影子,量少了当然高效率有一定的提高。但这也引进1个难题——大家没法根据JavaScript彻底操纵伪元素(我将在下面1节为大伙儿讲述)

1大波伪元向来了

除::before和::after外,别漏了下列的哦!

1.:first-line:只能用于块级元素。用于设定附设元素的第1个行內容的款式。能用的CSS特性为font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。

2.:first-letter:只能用于块级元素。用于设定附设元素的第1个字母的款式。能用的CSS特性为font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。

3.::selection:配对选定一部分的內容。能用的CSS特性为background,color。

有木有发现有的伪元素前缀是:有的确是::呢?::是CSS3的写法,实际上除::selection外,别的伪元素既两种前缀全是能够的,为适配性可挑选应用:,为非常容易区别伪元素和伪类则应用::,但我還是提议应用::来提升可读性,适配性就让postcss等专用工具帮大家解决就行了。

::before和::after的留意事项

1.默认设置display: inline;

2.务必设定content特性,不然1切全是无用功;

3.默认设置user-select: none,便是::before和::after的內容没法被客户选定的;

4.伪元素和伪类融合应用形如:.target:hover::after。

JavaScript实际操作伪元素

 上文提到因为伪元素仅坐落于CSSOM中,因而大家仅能根据实际操作CSSOM API——window.getComputedStyle来载入伪元素的款式信息内容,留意:大家能做的便是载入,没法设定的哦!

{- window.getComputedStyle的种类 -}
data PseudoElement = ":before" | "::before" | ":after" | "::after" | ":first-line" | "::first-line" | ":first-letter" | "::first-letter" | "::selection" | ":backdrop" | "::backdrop" | Null

window.getComputedStyle :: HTMLElement -> PesudoElement -> CSSStyleDeclaration

{- CSSStyleDeclaration案例的方式 -}
data CSSPropertyName = "float" | "backround-color" | ......
data DOMPropertyName = "cssFloat" | "styleFloat" | "backgroundColor" | ......
-- IE9+的方式
CSSStyleDeclaration#getPropertyValue :: CSSPropertyName -> *
-- IE6~8的方式
CSSStyleDeclaration#getAttribute :: CSSPropertyName -> *
-- 键值对方法获得
CSSStyleDeclaration#[DOMPropertyName] -> *

示例:

.target[title="hello world"]::after{
  display: inline-block;
  content: attr(title);
  background: red;
  text-decoration: underline;
}
const elTarget = document.querySelector(".target")
const computedStyle = window.getComputedStyle(elTarget, "::after")
const content = computedStyle.getPropertyValue("content")
const bg = computedStyle.getAttribute("backgroundColor")
const txtDecoration = computedStyle["text-decoration"]
console.log(content) // "hello world"
console.log(bg)      // red
console.log(txtDecoration) // underline

玩透Content特性

 到这里大家早已能够运用::before和::after完成tooltip等实际效果了,但实际上更加强劲的且更需花時间科学研究的才刚要刚开始呢!那便是Content特性,不仅能够简易立即地设定1个标识符串做为伪元素的內容,它还具有1定程度的程序编写工作能力,就如上面attr(title)那样,以其附设元素的title特点做为content值。下面请容许我为大伙儿详细介绍吧!

div::after{
    content: "一般标识符串";
    content: attr(父元素的html特性名字);
    content: url(照片、声频、视頻等資源的url);
    /* 应用unicode标识符集,选用4位16进制编号
     * 但不一样的访问器显示信息存在差别,并且挪动端鉴别度更差
     */
    content: "\21e0";
    /* content的好几个值能够随意组成,各处分根据空格隔开 */
    content: "'" attr(title) "'";
    
    /* 自增计数器,用于插进数据/字母/罗马数据序号
     * counter-reset: [<identifier> <integer>?]+,必选,用于标志自增计数器的功效范畴,<identifier>为自定名字,<integer>为起止序号默认设置为0。
     * counter-increment: [<identifier> <integer>?]+,用于标志计数器与具体关系的范畴,<identifier>为counter-reset中的自定名字,<integer>为步长默认设置为1。
     * <list-style-type>: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
     */
    content: counter(<identifier>, <list-style-type>);
    
    /* 以父附设元素的qutoes值做为content的值
     */
    content: open-quote | close-quote | no-open-quote | no-close-quote;
}

换行符:HTML实体线为&#010,CSS为\A,JS为\uA。

 能够看到Content接纳6类型型,和1种组成方法。在其中最终两种较为繁杂,大家后边逐1表明。

自定计数器

 HTML为大家出示ul或ol和li来完成目录,但假如大家期待完成更加可性化的目录,那末该怎样解决呢?content特性的counter种类值就可以帮到大家。

<!-- HTML 一部分-->
.dl
 .dt{chapter1}
 .dd{text11}
 .dd{text12}
 .dt{chapter2}
 .dd{text21}
 
/* CSS一部分 */
.dl {
  counter-reset: dt 0; /* 表明分析到.dl时,重设dt计数器为0 */
  
  & .dt {
    counter-reset: dd 0; /* 表明分析到.dt时,重设dd计数器为0 */
    
    &::before{
        counter-increment: dt 1; /* 表明分析到.dt时,dt计数器自增1 */
        content: counter(dt, lower-roman) " ";
    }
  }
  
  & .dd::before {
    counter-increment: dd 1; /* 表明分析到.dd时,dd计数器自增1 */
    content: counter(dd) " ";
  }
}

根据counter-reset来界定和重设计数器,根据counter-increment来提升计数器的值,随后根据counter来决策应用哪一个计数器,并特定应用哪样款式。

 假如用JavaScript来表明应当是这样的

const globalCounters = {"__temp":{}}

function resetCounter(name, value){
  globalCounters[name] = value
}
function incrementCounter(name, step){
  const oVal = globalCounters[name]
  if (oVal){
    globalCounters[name] = oVal + step
  }
  else{
    globalCounters.__temp[name] = step
  }
}
function counter(name, style){
    return globalCounters[name] || globalCounters.__temp[name]
}

function applyCSS(mount){
    const clz = mount.className
    if (clz == "dl"){
        resetCounter("dt", 0)
        const children = mount.children
        for (let i = 0; i < children.length; ++i){
          applyCSS(children[i])
        }
    }
    else if (clz == "dt"){
        resetCounter("dd", 0)
        incrementCounter("dt", 1)
        const elAsBefore = document.createElement("span")
        elAsBefore.textContent = counter("dt", "lower-roman") + " "
        mount.insertBefore(mount.firstChild)
    }
    else if (clz == "dd"){
        incrementCounter("dd", 1)
        const elAsBefore = document.createElement("span")
        elAsBefore.textContent = counter("dd", "lower-roman") + " "
        mount.insertBefore(mount.firstChild)
    }
}

嵌套循环计数器

 针对多层嵌套循环计数器大家可使用counters(<identifier>, <separator>, <list-style-type>?)

.ol
  .li
    .ol
      .li{a}
      .li{b}
  .li
    .ol
      .li{c}
.ol {
    counter-reset: ol;
    & .li::before {
        counter-increment: ol;
        content: counters(ol, ".");
    }
}

Content的限定

1.IE8+才适用Content特性;

2.除Opera9.5+中全部元素均适用外,别的访问器仅能用于:before,:after内应用;

3.没法根据JS获得Counter和Counters的运算結果。获得的就只能是"counter(mycouonter) \" \""。

自定引号

 引号这个平常非常少在乎的标记,实际上在不一样的文化艺术中应用的引号将不尽同样,如简体汉语地域应用的"",而日本则应用「」。那大家依据要求自定引号呢?回答是毫无疑问的。

 根据open-quote,close-quote,no-open-quoteno-close-quote便可完成,下面大家根据事例来了解。

 <q>会依据父元素的lang特性全自动建立::before和::after来完成插进quotation marks。

p[lang=en]>q{英语}
p[lang=no]>q{挪威语}
p[lang=zh]>q{中文}
p[lang=en]>q.no-quote{英语2}
div[lang=no]>.quote{挪威语2}

CSS片断:

p[lang=en] > q{
  quotes: "<!--" "-->"; /* 界定引号 */
}
p[lang=en] > q.no-quote::before{
  content: no-open-quote;
  /*或 content: none;*/
}
div[lang=no] > .quote {
  quotes: "<<-" "->>";
}
div[lang=no] > .quote::before {
  content: open-quote;
}
div[lang=no] > .quote::after {
  content: close-quote;
}

示例

切分线

p.sep{or}
.sep {
  position: relative;
  text-align: center;
  
  &::before,
  &::after {
    content: "";
    box-sizing: border-box;
    height: 1px;
    width: 50%;
    border-left: 3em solid transparent;
    border-right: 3em solid transparent;
    position: absolute;
    top: 50%;
  }
  
  &::before {
    left: 0;
  }
  
  &::after {
    right: 0;
  }
}

写保护实际效果(根据遮罩原先的元素完成)

.input-group {
  position: relative;
  
  &.readonly::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}

计数器

.selections>input[type=checkbox]{option1}+input[type=checkbox]{option2}
.selection-count
.selections{
  counter-reset: selection-count;
  
  & input:checked {
    counter-increment: selection-count;
  }
}
.selection-count::before {
  content: counter(selection-count);
}

参照

http://www.wozhuye.com/compatible/297.html https://dev.opera.com/articles/css-generated-content-techniques/

总结

以上所述是网编给大伙儿详细介绍的CSS 伪元素及Content 特性 ,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:互联网软件开发挑选哪些語言 返回下一篇:没有了