Parsing a selector name in a CSS

The original name can be like this

Some time ago, at a site to see this content:

"Is that okay?" Is my first impression of this. However, a little investigation to know, this writing is indeed effective. In addition, the sign expression of this _, does it look like there is a sense of existence? And then look at the matching CSS properties, Display:none!important; that is, the definition element must not be shown, is it also very consistent with this expression want to express meaning?

This unusual naming can be well applied as long as you follow the CSS syntax.

The rule of a life-name character

The combination of English words you must be familiar with, for example. Top_nav is used to represent top navigation, not only with legitimate selectors, but also with semantic requirements.

In addition, you should also know that the beginning character named by the selector can not be a number, for example. 3-column is not a valid selector. The consequence of using an illegal selector is that the corresponding CSS style rule becomes invalid because the selector does not parse correctly.

In fact, CSS syntax has more rules for named characters. The following is the content in the description of the name identifier of the consortium:

In CSS, identifiers (including element names, classes, and IDs into selectors) can contain only the characters [a-za-z0-9] A nd ISO 10646 characters u+00a0 and higher, plus the hyphen (-) and the underscore (_); They cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code.

This means that the name characters that are allowed in CSS include uppercase and lowercase letters, numbers, hyphens-, underscores _ and other ISO 10646 character sets (equivalent to Unicode). Also, the starting character portion cannot be a number, or 2 consecutive-, or 1-followed by 1 digits. In addition, you allow the use of escape characters and any ISO 10646-character numeric code.

After testing, IE6 also determines that the style rule is invalid if the starting character is an underscore _ and a single hyphen.

Word Escape

As you can see, the characters that are allowed to use the name are actually very many. However, there is one place to note, that is, special characters. A special character is a character (equivalent to a keyword in a programming language) that is determined to represent a particular meaning in the CSS syntax. For example... Such class naming is illegal because. is the character of the CSS selector representing class, so it is not allowed to be used directly in the name (...). How do you feel about this silent class name?

Special characters in CSS include:!, ", #, $,%, Ampersand, ', (,), *, +,,,-, .,/,:,;,,, =,,,, ^, [,,], ^, [,,], ^, ', {, |

This time, you want to include these special characters in the name, you need to use the character escape (character escape). The character escape is implemented by a backslash, and in the CSS selector you can remove the specific meaning of a special character by Fubanga it in a special word so that it can be used correctly for naming. For example, a special character # can be represented by a #.

The effect of the backslash is more than that. As mentioned earlier, any ISO 10646 character can be used. As defined by ISO 10646, all characters can be represented in hexadecimal code (especially those that are not easy to enter directly). In CSS syntax, start with a backslash, followed by a maximum of 6-digit hexadecimal digits, which is the code that forms an ISO 10646 character. This is the same as entering the ISO 10646 character directly, but is the most reliable because it is code in form.

To remove the specific meaning of special characters, you can use ISO 10646 code in addition to the preceding writing directly in front. For example, the # can also be expressed in 23 or 00023. Note that if the code is less than 6 digits (the first few are 0), be sure to leave a space at the end to make up the correct ISO 10646 code (this space is delimited, counted as part of the code and does not raise a special meaning in the selector). If you do not want to have this space, use the full 6-bit hexadecimal code.

For example, here is a legitimate naming example. Html:

　xml/html Code copy content to clipboard

1. < Div class="^_^"></div>

The definition in CSS:

CSS code copy content to clipboard

.5E _5e {Width:50px;height:50px;background:tomato}

This ^ belongs to special characters, but it can be parsed correctly after the code is written.

For more on CSS word escape, you are recommended to read CSS character escape sequences, and this author also gives a useful escape tool.

Make naming more interesting

Also to be prompted is that the ISO 10646 contains a lot of characters, even if it looks strange, but because it is not a special character, can be directly entered. Although it may not appear because of the editor font reason, it still works. For example, HTML:

xml/html code to copy content to clipboard

　　

Music on~

Corresponding CSS:

CSS code copy content to clipboard

.? {width:50px;height:50px;background:mistyrose;color: #333;}

The corresponding actual element is (right, I want to prove that the writing is valid!) ：

Music on~

If you want to express the area of the music content, the character graphic may say more semantically than the English word. And more importantly, this is more fun to do!

When using these characters, be aware that CSS and HTML encoding should use UTF-8. If HTML is generated by a server-side language (such as PHP), the encoding option should be set to Utf-8.

For information on how to find various characters, welcome to the Unicode query site Unicode character table.

See here, do you already want to start writing a different name for the selector? I've tried some ↓

Html:

　　xml/html Code copy content to clipboard

1. < Div class="(? ρ?*)"></div>
2. < Div class="(?ω?)" > </ Div >

 

Css:

CSS code copy content to clipboard

. (?ω?) {Width:50px;height:50px;background:skyblue;}

. (? ρ?*) {width:50px;height:50px;background:aquamarine;}

Later feel that the time, use this kind of bar, must give someone to see your code a surprise.

Conclusion

The

actually understands the CSS syntax for naming identifiers, and then there's so much room to play when you name them. Let's try more interesting selectors together!