CSS self-use study notes (1) – selector

The selector

• The basic choice

1. .class

.intro{} // Select all elements with class="intro"Copy the code

2. .class1.class2

.intro1. Intro2 {} // Select all elements whose class="intro1 intro2".Copy the code

3. .class1 .class2

Class ="class1"> <p class="class2"></ p ></ div>.class1Copy the code

4. #id

#firstname{} // Select the element whose id="firstname"Copy the code

5. *

*{} // Select all elementsCopy the code

6. element

P {} // Select all <p> elementsCopy the code

7. element.class

// Select all p elements with class="intro"Copy the code

8. Element1 element2,

P,a{} // Select all <p> elements and <a> elementsCopy the code

9. element1 element2

P a {} // Select all <p> contained <a> elementsCopy the code

10. element1 > element2

P > a{} // Select <a> element because the parent element is <p>Copy the code

11. element1 + element2

Div +p{} // Select the first <p> element immediately following the <div> element.Copy the code

12. element1 ~ element2

P ~ ul {} // Select each <ul> element preceded by a <p> elementCopy the code

• Attribute selection:

13. [attribute]

[target] {} // Select all elements with the target attributeCopy the code

< a href = "" target =" _blank "> disney.com < / a > / / are selected < a href =" "target =" _top "> wikipedia.org < / a > / / are selectedCopy the code

14. [attribute=value]

[target=_blank]{} select all elements with a target="_blank" attributeCopy the code

< a href = "" target =" _blank "> disney.com < / a > / / selected < a href =" "target =" _blank "> dis.com < / a > / / selected < a href =" " Target ="_top">wikipedia.org</a> // Not selectedCopy the code

15. [attribute~=value]

[title~=flower]{} // Select all elements whose title attribute contains the word "flower".Copy the code

<img SRC ="" title="tulip flower" /> <img SRC ="" title="aaaa flower" /> <img SRC ="" title="aaaa bridge" /> / / not being chosenCopy the code

16. [attribute^=value]

Img [title^=flower]{} // Select each <img> element whose title attribute value begins with "flower".Copy the code

< span style =" box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important; <img SRC ="" title="lupu Bridge "/> // Not selectedCopy the code

17. [attribute$=value]

Img [title$=flower]{} // Select each <img> element whose title attribute value ends in "flower".Copy the code

< span style =" box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important; <img SRC ="" title="lupu Bridge "/> // Not selectedCopy the code

18. [attribute|=value]

[lang | = en] {} / / choose the lang attribute value to "en" at the beginning of all elementsCopy the code

<p lang="en-us">Hi! <p lang="us">Hi! </p> // Not selectedCopy the code

19. [attribute*=value]

A [href*=" ABC "] {} // Select each <a> element whose href value contains the substring "ABC".Copy the code

<a class="test"> This is the text in the paragraph. <div class="test"> <div class="test"> <p class="test"> This is the text in the paragraph. </p> // Not selectedCopy the code

• Link selection:

20. :active

A :active{} // Select the active link (being clicked)Copy the code

21. :link

A :link{} // Select an unvisited linkCopy the code

22. :visited

A :visited{} // Select all the links that have been visitedCopy the code

Accessed, not accessed, accessing

• Insert content before and after:

23. ::after

P ::after{} // Insert content after p elementCopy the code

24. ::before

P ::before{} // Insert before the p elementCopy the code

• Input property selection:

25. :checked

Input :checked {} // Each selected <input> elementCopy the code

26. :default

Input :default{} // Select the initial default <input> elementCopy the code

27. disabled

Input :disabled{} // Each of the disabled <input> elementsCopy the code

28. :enabled

Input :enabled{} // Each enabled <input> elementCopy the code

29.:focus

<input> <input>Copy the code

30.:in-range

Input :in-range{} // Select <input> elements with values within the rangeCopy the code

31. ::placeholder

Input ::placeholder{} // Select the input element with the "placeholder" attribute.Copy the code

32.:read-write

Input :read-write {} // Select the input element for which the "readonly" attribute is not specified.Copy the code

33. :required

Input :required{} // Select the input element with a "readonly" attribute.Copy the code

34. :valid

Input :valid{} // Select all input elements with valid values.Copy the code

35. :optional

Input :optional{} // Select the input element without the "required" attribute.Copy the code

<p> Optional input elements: <br><input></p> // Select <p> Required input elements: <br><input required></p> // UncheckedCopy the code

36. input:out-of-range

Input :out-of-range{} // Select the input element whose value is out of the specified range.Copy the code

37.:read-only

Input :read-only{} // Select the input element with the specified "readonly" attribute.Copy the code

<input type="number" min="5" Max ="10" value="17"> select <input type="number" min="5" Max ="10" value="7"Copy the code

• Subclass selector

38. :empty

P :empty{} // every <p> element with no child elementsCopy the code

<p> The first paragraph. </p> // Not selected <p></p> // SelectedCopy the code

39. :first-child

P :first-child{} //<p> The first <p> element of the parent elementCopy the code

<div> <p> Parent element first child element. </div> </div>Copy the code

40. ::first-letter

P ::first-letter{} // Select the first letter of each <p> elementCopy the code

41. :first-line

P :first-line {} // Select the first line of each <p> elementCopy the code

42. :first-of-type

P :first-of-type{} // The first <p> element of the parent elementCopy the code

The < div > < p > 1111 < / p > / / selected 2222 < / p > < p > < / div > < p > this is the second paragraph. </p> // Select <p> this is the third paragraph. </p> // Not selectedCopy the code

43. :nth-child(n)

P :nth-child(2){} // Select the <p> element of the parent element's second childCopy the code

44. :nth-last-child(n)

P :nth-last-child(2){} // Select the <p> element of the penultimate child of the parent elementCopy the code

45. :nth-of-type(n)

P :nth-of-type(2){} // Select parent element second <p> elementCopy the code

46. :nth-last-of-type(n)

P :nth-last-of-type(2){} // Select the penultimate <p> element from the parent elementCopy the code

47. :only-of-type

P :only of type // Select each <p> element whose parent element is unique.Copy the code

<! DOCTYPE html> <html> <head> <style> p:only-of-type { background:#ff0000; } </style> </head> <body> <div> <p> This is a paragraph. </p> </div> <div> <p> </p> <p> This is a paragraph. </p> </div> </body> </html>Copy the code

48. :only-child

P :only-child{} // Select each <p> element of the unique child of the parent element.Copy the code

<div> <p> This is a paragraph. < p> // Select </div> <div> <span> this is a span. <p> This is a paragraph. </p> </div>Copy the code

• Other classification

49.:hover

A ::hover {} // Select the element over which the mouse pointer is locatedCopy the code

50. :fullscreen

:fullscreen // the element in fullscreenCopy the code

:fullscreen { background-color: yellow; } <button onclick="openFullscreen();" </button> <button onclick="closeFullscreen();" </button> <script> var elem = document.documentElement; function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } } function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { /* Safari */ document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { /* IE11 */ document.msExitFullscreen(); } } </script>Copy the code

51. :not(selector)

:not(p){} // Select every element that is not <p>.Copy the code

<h1> This is the heading </h1> // Select <p> this is a paragraph. </p> // Unchecked <p> This is another paragraph. </p> // Unchecked <div> This is the text in the div element. < / div > / / selectedCopy the code

Not commonly used:

52.:root

:root{} // Select the root element HTML of the documentCopy the code

53.::selection

::selection{} // Select the part of the element that the user has selectedCopy the code

54.:target

#news:target{} // Select the currently active #news elementCopy the code

Supplement :(subclass selectors commonly used)

Odd, odd, even even

p:nth-of-type(odd){}
p:nth-of-type(even){}
Copy the code

Use the formula (an + b). Description: indicates the length of the cycle, with n being the counter (starting from 0) and b being the offset

P :nth-of-type(3n+0){} p:nth-of-type(3n+0){Copy the code