css3 - What is the role of css pseudo-classes?
phpcn_u1582
phpcn_u1582 2017-05-16 13:27:20
0
2
501

As shown in the picture, this is what I encountered when I was reviewing interview questions. I would like to ask the master what are the specific differences?
Anyway, I didn’t find it when I wrote it. As for the effect, I still know it

phpcn_u1582
phpcn_u1582

reply all (2)
迷茫

Single colon (:) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements.
There is a description in the W3C specification on CSS3 selectors:

 A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

 This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.

 A simple translation, the general idea is that a pseudo element consists of a double colon and the name of the pseudo element. The double colon was introduced in the current specification to distinguish pseudo-classes from pseudo-elements. However, pseudo-classes are compatible with existing styles, and browsers need to support old pseudo-classes at the same time, such as :first-line, :first-letter, :before, :after, etc.

 Now you can fully answer the question in the title. For the pseudo-elements that existed before CSS2, such as :before, the single colon and the double colon::before have the same effect.

 So, if your website only needs to be compatible with webkit, firefox, opera and other browsers, it is recommended to use double colon writing for pseudo elements. If it has to be compatible with IE browser, it is safer to use CSS2 single colon writing.

    左手右手慢动作

    Baidu knows this kind of problem

    See:

    Pseudo elements https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

    Pseudo classes https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

      Latest Downloads
      More>
      Web Effects
      Website Source Code
      Website Materials
      Front End Template
      About us Disclaimer Sitemap
      php.cn:Public welfare online PHP training,Help PHP learners grow quickly!