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

In this issue, the editor will bring you what is the basic knowledge of CSS selector. The article is rich in content and analyzes and describes it from a professional point of view. I hope you can get something after reading this article.

Basic knowledge of CSS selector

1. Basic selector

Meaning of serial number selector

1. * generic element selector that matches any element

2. E tag selector that matches all elements that use the E tag

3. .info class selector that matches all elements that contain info in the class attribute

4. # footer id selector that matches all elements whose id attribute is equal to footer

Example:

CSS Code copies content to the clipboard

* {margin:0; padding:0;}

P {font-size:2em;}

.info {background:#ff0;}

P.info {background:#ff0;}

P.info.error {color:#900; font-weight:bold;}

# info {background:#ff0;}

P#info {background:#ff0;}

Second, the combination selector of multi-elements

Meaning of serial number selector

5. Epen F multi-element selector, which matches all E elements or F elements at the same time, and E and F are separated by commas

6. E F descendant element selector, which matches all F elements that belong to the descendants of E element, and E and F are separated by spaces.

7. E > F child element selector, which matches the child element F of all E elements

8. E + F is adjacent to the element selector, matching all sibling elements F immediately after the E element

Example:

CSS Code copies content to the clipboard

Div p {color:#f00;}

# nav li {display:inline;}

# nav a {font-weight:bold;}

Div > strong {color:#f00;}

P + p {color:#f00;}

3. CSS 2.1attribute selector

Meaning of serial number selector

9. E [att] matches all E elements with the att attribute, regardless of its value

10. E [att=val] matches all E elements whose att attribute is equal to "val"

11. E [att~=val] matches all att attributes with multiple space-separated values, one of which is equal to "val"

12. E [att | = val] matches all att attributes with multiple hyphen separated (hyphen-separated) values, one of which is

E elements that begin with "val" are mainly used for lang attributes, such as "en", "en-us", "en-gb", and so on.

Example:

CSS Code copies content to the clipboard

P [title] {color:#f00;}

Div [class=error] {color:#f00;}

Td [headers~=col1] {color:#f00;}

P [lang | = en] {color:#f00;}

Blockquote [class=quote] [cite] {color:#f00;}

Fourth, pseudo-classes in CSS 2.1,

Meaning of serial number selector

13. E:first-child matches the first child of the parent element

14. E:link matches all unclicked links

15. E:visited matches all links that have been clicked on

16. E:active matches the E element over which the mouse has been pressed and has not been released

17. E:hover matches the E element over which the mouse hovers

18. E:focus matches the E element that gets the current focus

19. E:lang (c) matches an E element whose lang attribute is equal to c

Example:

CSS Code copies content to the clipboard

P:first-child {font-style:italic;}

Input [type=text]: focus {color:#000; background:#ffe;}

Input [type=text]: focus:hover {background:#fff;}

Q:lang (sv) {quotes: "\ 201D"\ 201D"\ 2019"\ 2019";}

5. Pseudo elements in CSS 2.1,

Meaning of serial number selector

20. E:first-line matches the first line of the E element

21. E:first-letter matches the first letter of the E element

twenty-two。 E:before inserts the generated content before the E element

23. E:after inserts the generated content after the E element

Example:

CSS Code copies content to the clipboard

P:first-line {font-weight:bold; color;#600;}

. preamble:first-letter {font-size:1.5em; font-weight:bold;}

.cbb: before {content: "; display:block; height:17px; width:18px; background:url (top.png) no-repeat 0; margin:0 00-18px;}

A:link:after {content: "(" attr (href) ");}

VI. Universal selector for sibling elements of CSS 3

Meaning of serial number selector

24. E ~ F matches any sibling F element after E element

Example: meaning of sequence number selector

25. E [att^ = "val"] attribute att element whose value begins with "val"

twenty-six。 E [att$= "val"] element whose value of attribute att ends with "val"

twenty-seven。 The value of the E [att*= "val"] attribute att contains the element of the "val" string

CSS Code copies content to the clipboard

P ~ ul {background:#ff0;}

7. CSS 3 attribute selector

Example:

C # Code copies content to the clipboard

Div [id ^ = "nav"] {background:#ff0;}

VIII. Pseudo classes related to user interface in CSS 3

Meaning of serial number selector

twenty-eight。 E:enabled matches the active element in the form

twenty-nine。 E:disabled matches disabled elements in the form

thirty。 E:checked matches the selected radio (checkbox) or checkbox (check box) element in the form

thirty-one。 E::selection matches the element currently selected by the user

Example:

CSS Code copies content to the clipboard

Input [type= "text"]: disabled {background:#ddd;}

IX. Structural pseudo-classes in CSS 3

Meaning of serial number selector

thirty-two。 E:root matches the root element of the document, or, for HTML documents, the HTML element

thirty-three。 E:nth-child (n) matches the nth child element of its parent element, with the first number 1

thirty-four。 E:nth-last-child (n) matches the last-to-last child element of its parent element, with the first number 1

thirty-five。 E:nth-of-type (n) works similarly to: nth-child (), but only matches elements that use the same tag

thirty-six。 E:nth-last-of-type (n) works similarly to: nth-last-child (), but only matches elements that use the same tag

thirty-seven。 E:last-child matches the last child of the parent element, which is equivalent to: nth-last-child (1)

thirty-eight。 E:first-of-type matches the first child element that uses the same tag under the parent element, which is equivalent to: nth-of-type (1)

thirty-nine。 E:last-of-type matches the last child element that uses the same tag under the parent element, which is equivalent to: nth-last-of-type (1)

forty。 E:only-child matches the only child element under the parent element, which is equivalent to: first-child:last-child

Or: nth-child (1): nth-last-child (1)

forty-one。 E:only-of-type matches the only child element under the parent element that uses the same tag, which is equivalent to: first-of-type:last-of-type

Or: nth-of-type (1): nth-last-of-type (1)

forty-two。 E:empty matches an element that does not contain any child elements. Note that text nodes are also treated as child elements.

Example:

CSS Code copies content to the clipboard

P:nth-child (3) {color:#f00;}

P:nth-child (odd) {color:#f00;}

P:nth-child (even) {color:#f00;}

P:nth-child (3n+0) {color:#f00;}

P:nth-child (3n) {color:#f00;}

Tr:nth-child (2n+11) {background:#ff0;}

Tr:nth-last-child (2) {background:#ff0;}

P:last-child {background:#ff0;}

P:only-child {background:#ff0;}

P:empty {background:#ff0;}

10. Inverted pseudo-class of CSS 3

Meaning of serial number selector

forty-three。 E:not (s) matches any element that does not match the current selector

Example:

CSS Code copies content to the clipboard

: not (p) {border:1px solid # ccc;}

11. Target pseudo-class in CSS 3

Meaning of serial number selector

forty-four。 E:target matches the effect of a specific "id" click in the document

Some suggestions on the use of selectors

The CSS selector consists of initialization parameters that indicate the page element to which the CSS rule is applied. As a front-end developer of a website, we should avoid writing some common expensive CSS selector patterns and write efficient CSS selectors as far as possible, so as to speed up the rendering speed of the page and shorten the rendering time of the page.

Steve Souders, a senior web development engineer at Google, ranked the efficiency of CSS selectors from high to low:

1.id selector (# myid) 2. Class selector (.myclassname) 3. Tag selector (div,h2,p) 4. Adjacent selector (h ~ 2 _ selecp) 5. Sub-selector (ul

< li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child） 上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最底。 综合上面的顺序，我们清楚的知道，id和类名用于关键选择器上效率是最高的，而CSS3的仿伪类和属性选择器，虽然使用方便，但其效率却是最低的。 知道了基本原理以后，我们编写CSS时就应该注意了。下面举几个例子，让大家理解的更透彻一些： 1.不要在编写id规则时用标签名或类名 BAD button#backButton {…} BAD .menu-left#newMenuIcon {…} GOOD #backButton {…} GOOD #newMenuIcon {…} 由于样式系统从最右边的选择符开始向左进行匹配，只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出，所以，在button#backButton {…}中，样式系统先找到id为backButton的元素，然后继续向左匹配，查看该元素的标签名是不是button，如果不是，查找下一个id为backButton的元素，再检查这个元素的标签名，如此周而复始，直到到达文档末尾。如果只是#backButton {…}，则样式系统找到id为backButton的元素后，因为左边没有其他选择符了，它就退出而结束查找了。 另外，根据HTML规范，id在HTML中是唯一的，也就是说一个HTML页面只限定有一个id为"XX"的元素，而不限制拥有这个ID元素的标签名，所以,在button#backButton {…}中,button标签完全是无意义的，可以，而且应该去掉，button#backButton {…}与#backButton {…}是等价的。在#backButton前多写了button,只会引起样式系统向左移动，继续查找页面元素，损耗页面性能，延长页面渲染时间。 另一方面，在id元素前面添加标签名，还会引起另一个致命的问题，比如原来id为backButton的标签名是button,如果原来样式声明写成button#backButton {…}，则现在需要把button标签改成input，id不变，则button#backButton {…}声明的样式规则在这个id同样为backButton的input元素上不起作用，不信大家可以自己动手编写试一下。 2.不要在编写class规则时用标签名 BAD treecell.indented {…} GOOD .treecell-indented {…} //语言化和标签名绑在一起 假设treecell BEST .hierarchy-deep {…} //语言化和标签名无关 原理参考第一条。 3.把多层标签选择规则用class规则替换，减少css查找 BAD treeitem[mailfolder="true"] >

Treerow > treecell {… }

GOOD

. treecell-mailfolder {... }

4. Avoid using sub-selectors

Now let's look at paragraph 3 of David Hyatt: descendant selectors are the most expensive selectors in CSS. It's ridiculously expensive-especially if you put it with a label or wildcard!

BAD

Treehead treerow treecell {... }

BETTER, BUT STILL BAD (see next guideline)

Treehead > treerow > treecell {… }

It's best never to add a sub-selector after the tag.

BAD

Treehead > treerow > treecell {… }

GOOD

. treecell-header {... }

BAD

Treeitem [IsImapServer= "true"] > treerow > .tree-folderpane-icon {… }

GOOD

.tree-folderpane-icon [IsImapServer= "true"] {... }

5. Rely on inheritance

BAD

# bookmarkMenuItem > .menu-left {list-style-image: url (blah)}

GOOD

# bookmarkMenuItem {list-style-image: url (blah)}

Finally, let's make a conclusion. When writing CSS, websites should give priority to using class selectors, avoid using wildcard selectors (*) and attribute selectors (a [rel = "external"]), and avoid using descendant selectors in conjunction with tag selectors. Using the id selector has the best performance, but you should pay attention to its uniqueness when writing and use it with caution. CSS3 selectors (for example:: nth-child (n) nth child) help us lock down the elements we want while keeping the tags clean and semantic, but the truth is, these fancy selectors make more browser resources intensive. Quote David Hyatt's argument about CSS3 selectors: if you care about page performance, they really shouldn't be used!

The above is the basic knowledge of CSS selector shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are 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.