Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "CSS pseudo elements and Content attributes how to use", the content is easy to understand, clear, hope to help you solve doubts, the following let Xiaobian lead you to study and learn "CSS pseudo elements and Content attributes how to use" this article.

Initial recognition of pseudo elements

The first thing that comes to mind when talking about pseudo elements is:: before and:: after, which are actually inserting the first child node and appending the last child node on the element hit by their affiliated selector. Then I couldn't help asking, "isn't it the same to add two class directly to. Before and. After?"

In fact, there are two benefits of using pseudo elements:: before and:: after:

The amount of code in HTML is reduced, which is helpful to SEO

Improve the efficiency of JavaScript query elements.

Then why these two benefits? The reason is that pseudo-elements do not exist in DOM, but do not exist in CSSOM,HTML code and DOMTree, and the natural efficiency is improved with less quantity. But this also introduces a problem-- we can't completely manipulate pseudo-elements through JavaScript (I'll talk about it in the next section).

A big wave of pseudo elements is coming.

In addition to:: before and:: after, don't leave out the following!

: first-line: can only be used for block-level elements. Used to style the contents of the first line of the subsidiary element. The available CSS property is font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear.

: first-letter: can only be used for block-level elements. Used to style the first letter of a subsidiary element. The available CSS property is font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear.

:: selection: matches the contents of the selected section. The available CSS property is background,color.

Have you found that some pseudo elements have the prefix: some are::? :: is the way to write CSS3, in fact, in addition to:: selection, the other pseudo elements both prefixes are OK, for compatibility can be used:, to easily distinguish between pseudo elements and pseudo classes to use::, but I still recommend using:: to improve readability, compatibility just let tools such as postcss help us deal with it.

Notes for:: before and:: after

Default display:inline

The content property must be set, otherwise everything is useless

The default user-select:none, that is, the contents of:: before and:: after cannot be selected by the user

Pseudo elements and pseudo classes are used in conjunction with a form such as: .target: hover::after.

JavaScript manipulates pseudo elements

As mentioned above, because pseudo-elements are only located in CSSOM, we can only read the style information of pseudo-elements by manipulating CSSOMAPI--window.getComputedStyle. Note: all we can do is read, not set!

{- Type of window.getComputedStyle -}

DataPseudoElement= ": before" | ": before" | ": after" | ":: after" | ": first-line" | ":: first-line" | ": first-letter" | ":: first-letter" | ":: selection" | ": backdrop" | ": backdrop" | Null

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

{- method of CSSStyleDeclaration instance -}

DataCSSPropertyName= "float" | "backround-color" |.

DataDOMPropertyName= "cssFloat" | "styleFloat" | "backgroundColor" |.

-- IE9+ 's method

CSSStyleDeclaration#getPropertyValue::CSSPropertyName- > *

-- IE6~8 's method

CSSStyleDeclaration#getAttribute::CSSPropertyName- > *

-- obtained by key-value pair

CSSStyleDeclaration# [DOMPropertyName]-> *

Example:

.target [title= "helloworld"]:: after {

Display:inline-block

Content:attr (title)

Background:red

Text-decoration:underline

}

ConstelTarget=document.querySelector (".target")

ConstcomputedStyle=window.getComputedStyle (elTarget, ":: after")

Constcontent=computedStyle.getPropertyValue ("content")

Constbg=computedStyle.getAttribute ("backgroundColor")

ConsttxtDecoration=computedStyle ["text-decoration"]

Console.log (content) / / "helloworld"

Console.log (bg) / / red

Console.log (txtDecoration) / / underline

Play through the Content attribute

So far we can use:: before and:: after to achieve tooltip and other effects, but in fact, the more powerful and more time-consuming research is just beginning! That is the Content attribute, which not only can simply and directly set a string as the content of a pseudo element, it also has a certain degree of programming ability, such as attr (title) above, with the title property of its subsidiary element as the content value. Next, please allow me to introduce to you.

P::after {

Content: "normal string"

Content:attr (html attribute name of the parent element)

Content:url (url of picture, audio, video, etc.)

/ * use the unicode character set and use 4-bit hexadecimal coding

* but there are differences in the display of different browsers, and the recognition of the mobile terminal is even worse.

, /

Content: "\ 21e0"

/ * multiple values of content can be combined arbitrarily, and each part is separated by spaces * /

Content: "'" attr (title) "'"

/ * self-increment counter for inserting numeric / alphabetic / Roman numeral numbers

* counter-reset: [?] +, required, used to identify the scope of the self-incrementing counter. It is a custom name, and the starting number defaults to 0.

* counter-increment: [?] +, which is used to identify the range that the counter is actually associated with. It is a custom name in counter-reset, and the step size defaults to 1.

*: 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 (,)

/ * take the qutoes value of the parent subsidiary element as the value of content

, /

Content:open-quote | close-quote | no-open-quote | no-close-quote

}

Newline character: the HTML entity is & # 010, the CSS is\ A ~ JS is\ uA.

You can see that Content accepts six types and a combination. The last two are more complex, which we will explain one by one later.

Custom counter

HTML provides us with ul or ol and li to implement lists, but what if we want to implement more masculine lists? The counter type value of the content attribute can help us.

.dl

.dt {chapter1}

.dd {text11}

.dd {text12}

.dt {chapter2}

.dd {text21}

/ * CSS part * /

.dl {

Counter-reset:dt0;/* indicates that when parsing to .dl, the dt counter is reset to zero /

& .dt {

Counter-reset:dd0;/* indicates that when parsing to .dt, the dd counter is reset to 0 percent /

&:: before {

Counter-increment:dt1;/* indicates that when parsing to .dt, the dt counter increments by 1 percent /

Content:counter (dt,lower-roman) ""

}

}

& .dd:: before {

Counter-increment:dd1;/* indicates that when parsing to .dd, the dd counter increments by 1 percent /

Content:counter (dd) ""

}

}

87877522-5ba0ab31a71d7_articlex.png

Define and reset counters through counter-reset, increase the value of counters through counter-increment, and then use counter to decide which counter to use and specify which style to use.

If you use JavaScript to express it, it should be like this.

ConstglobalCounters= {"_ _ temp": {}}

FunctionresetCounter (name,value) {

GlobalCounters [name] = value

}

FunctionincrementCounter (name,step) {

ConstoVal=globalCounters [name]

If (oVal) {

GlobalCounters [name] = oVal+step

}

Else {

GlobalCounters.__ temp [name] = step

}

}

Functioncounter (name,style) {

ReturnglobalCounters [name] | | globalCounters.__ temp [name]

}

FunctionapplyCSS (mount) {

Constclz=mount.className

If (clz== "dl") {

ResetCounter ("dt", 0)

Constchildren=mount.children

For (leti=0;iq {English})

P [lang=no] > Q {Norwegian}

P [lang=zh] > Q {Chinese}

P [lang=en] > q.no-quote {English 2}

Div [Lang = no] > .Norwegian {Norwegian 2}

CSS fragment:

P [lang=en] > Q {

Quotes: ""; / * define quotation marks * /

}

P [lang=en] > q.no-quote::before {

Content:no-open-quote

/ * or content:none;*/

}

Div [Lang = no] > .room{

Quotes: ""

}

Div [Lang = no] > .resume:: before {

Content:open-quote

}

Div [Lang = no] > .resume:: after {

Content:close-quote

}

The above is all the content of the article "how to use CSS pseudo elements and Content attributes". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.