CSS selectors

Element selector

The elements of the document are the basic selectors

<style>
  html{color: royalblue; }h1{color: salmon; }p{color: slateblue; }</style>
<body>
  <h1>Heading one heading one</h1>
  <h2>Heading 2 heading 2</h2>
  <p>One paragraph at a time</p>
</body>
Copy the code

Selector grouping

H1,h2,p{color:blue; background:white}

The wildcard selector *{color:red} makes every element in the document red

Class selectors

Class selectors allow styles to be specified in a way that is independent of document elements and can be used alone or in combination with other elements.

<style>
  .important{
      font-style: italic;
  }
  .warning{
      font-weight: bolder;
  }
  .important.warning{
      background: steelblue;
  }
</style>
<body>
   <p class="important">This paragraph is very important</p>
   <p class="warning">This is warning</p>
   <p class="important warning"> This is a very importat warning</p>
   <p>This is a paragraph</p>
</body>
Copy the code

The ID selector

ID selectors need to be preceded by “#”, for example #intro{color:yellow}.

The difference between ID and class selectors

  • The ID selector can only be used once in a document
  • ID selectors cannot be used in combination with a list of ID words
  • ID can have a lot more meaning

Class selectors can be used multiple times, just like people’s names can be repeated, but ids, like ID numbers, are unique across the country

Property selector

Attribute selectors can select elements based on their attribute machine attribute values

<style> a[alt]{ background: tomato; font-size: 25px; } < / style > < body > < a href = "http:www.sohu.com" Alt = "link failure" > sohu net < / a > < a > href=http:www.qq.com tencent < / a > < / body >Copy the code

Descendant selector

Also known as inclusion selectors, descendant selectors can select elements that are descendants of an element

<style> p a{ font-size: 25px; background: turquoise; } < / style > < body > < h3 > this is < a href = "http:www.sohu.com" Alt = "link failure" > sohu network links < / a > < / h3 > < p > this is < a Href = HTTP :www.qq.com> </p> </body>Copy the code

Child element selector

In contrast to descendant selectors, child selectors can only select elements that are children of an element. Child element selectors use > connections, such as h1 > strong {color:red}

The difference between child and descendant selectors

  • The child element selector only looks for children, not grandchildren.
  • Child element selectors can only be used>To connect, cannot use Spaces

Example of combining descendant and child selectors: table.pany td > p

Adjacent sibling selectors

You can select the element immediately following another element that has the same parent element

Pseudo element selector

  • :first-linePseudo-elements are used to set special styles to the first line of text. Note that this can only be used for block-level elements
<style> div{ width: 250px; height: 200px; } div::first-line{ font-weight: bolder; } </style> <body> <div> Markdown applications don't agree on how to handle the assumptions in the middle of a word compatibility, use asterisks to bold and italicize the middle of a word for emphasis. </div> </body>Copy the code

  • first-letterA pseudo-element used to style the first letter of text in a special way
  • :beforePseudo-elements that can be inserted before the content of an element

Example: h1: before {content: url (http:google.com)}

  • :afterPseudo-element, after which new content is inserted
  • first-childMatches the first child of any element

Pseudo class selector

Anckor pseudo-classes

A :link: an unvisited link a:visited: a visited link A :hover: a selected linkCopy the code

CSS selector priority

  • The same element references more than one style, and the style attribute that comes next takes precedence
  • The type of the style selector varies from ID selector >class selector > label selector
  • When there is a hierarchical containment relationship between tags, descendant elements inherit the style of their ancestors. If the descendant element defines the same style as the ancestor element, the same style attribute of the ancestor is overridden, and the inherited style takes lower precedence
  • If the style source is different, the preference is inline style > Internal Style > External Style > Browser User-defined Style > Browser Default style
  • Three words:The more specific the higher the priority, the same priority after the overwrite the previous, with! The style attribute of the important tag has the highest priority, but is best used sparingly.