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

Today, I would like to share with you about CSS:: first-letter pseudo-elements how to use the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

First, understand:: what exactly does first-letter pseudo element mean?

Many years ago, before Chrome browsers were born, and before IE9 appeared, first-letter was still called a pseudo-class selector and was written as a colon, such as this: first-letter. At that time, the semantics were more straightforward, select the first character, and then set some styles. Later, pseudo-classes and pseudo-elements are more clearly defined and standardized,:: after,: before,:: backdrop,:: first-letter,:: first-line,:: selection (see article here) are pseudo-elements,: active,: focus,: checked, and so on are called pseudo-classes. Some changes have taken place in the semantics of:: first-letter-the first character is used as an imaginary child of the element.

Note some of the phrases here, the "hypothetical" correspondence "pseudo", and the emergence of the term "sub-element", which are important in understanding some of the style representations of first-letter.

2. The premise that pseudo-elements of:: first-letter take effect

To:: first-letter (: first-letter) pseudo elements take effect, it requires certain conditions, and at first glance the conditions are quite harsh.

1. First of all, the display calculated value of the element must be block, inline-block, table-cell, list-item or table-caption. All other display calculated values are useless, including display:table, display:flex, and so on.

Seeing is believing, you can click here: display attribute value and:: first-letter effective relationship demo

For example, we choose display:flex, and as a result, the first letter is black instead of red, indicating that the display:flex element does not support:: first-letter pseudo-elements.

two。 Then, not all characters can exist as:: first-letter pseudo elements, what do you mean, let's look at a simple example, such as CSS and HTML code:

P:first-letter {color: # cd0000;}

?

According to our understanding, whether the first question mark should be red, in fact, sorry, all are default black, the following line is the effect of real-time display:

?

Why?

This is because the common punctuation marks, all kinds of parentheses and quotation marks are all "auxiliary" characters in the eyes of:: first-letter pseudo elements, which feels like a gift from JD.com, but the gift itself cannot be purchased. ) is a giveaway. We can see from the example that if we write some content characters, such as the Chinese word "auxiliary", after a bunch of question marks in HTML above, the result is as follows:

? Auxiliary

"? auxiliary" are all red, the sample is quite personality, or not red, if you want to be popular, there will be a big wave of popularity. The reason is that the word "auxiliary" is: first-letter pseudo-elements really want to be included in the bag as "pseudo-elements" characters, but now there are a bunch of unpopular question marks. ), what should I do? Take it as a gift, so a large wave of characters are all red. If it's all question marks (? Since there is no main item, you will not be able to get a giveaway, so:: first-letter does not select any characters, and the question marks are all black.

The following friends may wonder which characters belong to "giveaway" and which belong to "goods". I specially made a demo, and you can click here: CSS:: first-letter and special character relationship test demo.

The following is a screenshot of demo:

To sum up, the "gift character" includes: @ #% & * () [] [] {}:: ";";''",.?!!... *, /\.

Normal characters that can be used directly as pseudo elements are numbers, English letters, Chinese and $, as well as some operators and spaces that are very easy to ignore. Here, the space needs to be boldly emphasized, a character that is easy to ignore.

/ / zxx: it should be noted that the "giveaway character" under the IE7 browser is much less, and the IE8+ browser is beginning to be unified.

3. Finally, there cannot be elements such as pictures or inline-table before the characters, for example, HTML and CSS below:

P:first-letter {color: # cd0000;}

Red

Results:

Red

Just because the extra display value is an element with an inline-block size of 0, the pseudo-element:: first-letter is directly soy sauce.

One might wonder, what if it was generated by:: before pseudo elements?

Generally speaking, there is not much relationship between:: before pseudo-elements and ordinary elements, for example, selectors such as: first-child,: empty are not affected, see my previous research article "before of CSS, two pseudo-element features of after". However, because:: first-letter he is also a pseudo element, the so-called fish with fish and shrimp with shrimp, turtles with bastards, because we are all pseudo-elements, there will always be some indelible basic feelings.

To sum up in technical terms: before pseudo-elements also participate in:: first-letter pseudo-elements.

For example, CSS and HTML are as follows:

P:before {content: 'news:';} p:first-letter {color: # cd0000;}

Smartisan 2016 Shanghai New products Conference on October 18th

The result is shown in the screenshot below:

If you don't believe it, click here: before pseudo-element and get demo by:: first-letter pseudo-element

Browsers, including IE8, behave like this.

3. The CSS attribute that the pseudo element of first-letter can take effect.

If the character is selected as the:: first-letter pseudo-element, it is not like the:: before pseudo-element, almost all CSS is valid, only in part, as follows:

All font-related properties: font, font-style, font-variant, font-weight, font-size, line-height and font-family.

All background-related properties: background-color, background-image, background-position, background-repeat, background-size, and background-attachment.

All margin related attributes: margin, margin-top, margin-right, margin-bottom, margin-left.

All padding related attributes: padding, padding-top, padding-right, padding-bottom, padding-left.

All border related attributes: abbreviated border, border-style, border-color, border-width and ordinary writing properties.

Color property.

Text-decoration, text-transform, letter-spacing, word-spacing (where appropriate), line-height, float, vertical-align (only if float is none) these CSS attributes.

So if you want to use visibility:hidden or display:none to hide:: first-letter pseudo elements, then save it.

4. Some interesting features of first-letter pseudo-elements

1. Support for nesting of some display attribute value tags

: first-letter pseudo-elements can be obtained across tags, that is, you can choose not only anonymous inline boxes, but also layers of tags, but there are some limitations, not all tag nesting is useful.

If the display value is inline, block, table, table-row, table-caption, table-cell, list-item, it is OK; but it cannot be inline-block, inline-table, it will be invalid directly; while display:flex changes the rule and directly selects the character content of the next line.

The language is pale and you can see it clearly. You can click here: CSS:: first-letter nesting demo with various types of tags

Let's use display:flex to show the effect, as shown in CSS and HTML:

P:first-letter {color: # cd0000;} p > span {display: flex;}

Let's see if the first character turns red.

Results:

Moreover, this nesting relationship supports multi-layer nesting, that is, successive nesting of 4'5 inline-level tags has the same effect as no tag nesting at all.

two。 The weight of color is always the highest.

This is a mistake easily made by my friends, and it is also one of the top 10 incomprehensible problems in the CSS world. For example, the following question was asked by a colleague in an email, and I simply edited it:

P:first-letter {color: red;} p > span {color: bluetooth importance;}

Let's see if the first character turns red.

What is the color of the character "No."?

Basically, more than 95% of the front-end partners will think that it is blue, because everyone considers it from the point of view of the weight of the CSS selector, which is no problem in itself, but ignores a very important point: first-letter pseudo-elements actually exist as child elements, or should be seen to be child elements, so it is easy to understand that inherited attributes such as color The CSS setting of the child element must be higher than that of the parent element, even if the parent uses the heavyweight! important, because the child element inherits first and then applies its own settings, so the end result of the above CSS and HTML is that the color of the first character "no." is red red!

This is:: another important feature of first-letter pseudo elements is that colors and other weights are always the highest.

If you are in doubt about this color case, you can witness it with your own eyes. You can click here: first-letter pseudo-element color weight is always the highest demo

The result is as follows:

5. Examples of some practical applications of first-letter

A few years ago, first-letter introduced an IE6,IE7-compatible method that allows inline-block elements to hide text, called "letter-spacing+first-letter for button text hiding".

Here is another practical application that Brother Shui mentioned to me earlier. That is, e-commerce products often have a price, and the price is usually preceded by a sheep's horn symbol ¥, indicating the price. Often this sheep's horn symbol font will be relatively special, the font size is also relatively large, and the value of the text is a few pixels away. To achieve the effect here, our usual practice is to wrap a span tag around the sheep horn symbol ¥, name a class name, and then control it through CSS. In fact, there is a simpler and more ingenious way to use the pseudo elements introduced in this article:: first-letter.

The following CSS schematic code:

.price:first-letter {margin-right: 5px; font-size: xx-large; vertical-align:-2px;}

As a result, our HTML can be simple:

¥399

The sheep's horn symbol ¥is not a "giveaway" character, so it works here.

You can click here: CSS:: first-letter cleverly controls the sheep's horn symbol demo

The screenshot is as follows:

The above is all the content of the article "CSS:: how to use first-letter pseudo elements". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.