CSS selectors

The element

Each element generates a box

Replacement elements and non-replacement elements

Replace element: The part used to replace element content is not directly represented by the document content. The IMG element, for example, has no content of its own and is replaced by an image file outside the document itself. Input elements also, depending on type, replace input.
Non-replacement elements: Displayed in the box generated by the element itself.

Element display role

Block-level elements

Block-level elements generate element boxes that fill the content area of their parent element. Generates delimiters before and after element boxes. List items are block-level elements.

Inline elements

Generates element boxes within a text without breaking the text.

<style>
    p {
      display: inline;
    }

    em {
      display: block;
    }
</style>

<p>This is a paragraph with <em>an inline element</em> within it.</p>
<! You can use CSS to change p to inline and em to block, but you can't reverse the nested relationship between elements.
Copy the code

A variety of ways to associate documents with CSS

The link tag

<link rel="stylesheet" href="" media="">
Copy the code

Attributes of media: all, Screen, print

Candidate style sheets

Set the REL property to Alternate Stylesheet. It only appears when the user selects the style sheet. If the browser can use a candidate style sheet, it generates a list of candidate styles using the titlle attribute value of the link element.

  <link rel="stylesheet" href="" title="default">
  <link rel="alternate stylesheet" href="" title="Big Test">
  <link rel="alternate stylesheet" href="" title="Crazy colors!">
Copy the code

Stylesheet is preferred, but once a candidate stylesheet is selected, the preferred stylesheet is no longer used. Specify a set of style sheets as the preferred style sheet, and only one of them will be used. If no title is specified for the style, it will be used as a permanent style sheet.

@import

Must appear first in the style element.

  <style>
    @import url(test.css);
    @import "test.css";
    
    @import url(test.css) all;
    @import "test.css" screen;
  </style>
Copy the code

Use: External stylesheets need to use the styles of other external stylesheets. Because the external stylesheet cannot contain any document tags, the link element cannot be used. But you can use @import.

Inline style

Through the STYLE attribute of HTML

The selector

Wildcard selector

Multiclass selectors

  <style>
    .warning.urgent {
      background-color: silver;
    }
    p.waring.help
    {
      /* If there is an absent class name help, the whole thing will not take effect */
    }
  </style>
<p class="urgent warning">This is a paragraph.</p>  
<! -- Different order but still valid -->

Copy the code

Property selector

Select all H1 elements that have a class attribute

  <style>
    h1[class] {
      color: silver;
    }
  </style>
Copy the code

Select elements based on their attributes

  <style>
    img[alt] {
      border:3px solid red;
    }
  </style>
Copy the code

Bold all elements that contain title

  <style>
    *[title] {
      font-weight: bold;
    }
  </style>
Copy the code

You can also select based on multiple attributes

  <style>
    a[href][title] {
      font-weight: bold;
    }
  </style>
Copy the code

Select this parameter based on the attribute value

  <style>
    a[href="http://www.baidu.com/"][title="W3C HOME"] {
      font-weight: bold;
    }
  </style>
Copy the code

If you encounter a value that itself contains a whitespace delimited list of values, the match will be problematic. Must write.

  <style>
    p[class="urgent warning"] {
      font-weight: bold;
    }
  </style>
<p class="urgent warning">This is a paragraph.</p>
Copy the code

Select based on some attribute values

  <style>
    p[class~="warning"] {
      font-weight: bold;
    }
  </style>
<p class="urgent warning">This is a paragraph.</p> 
Copy the code

Select elements based on partial attribute values

  <style>
   img[title~="Figure"]{
      border:1px solid grey;
   }
   /* Will select all title text containing all images of Figure */
  </style>
Copy the code

String matching property selector

[foo^= “bar”] selects all elements that begin with bar
[foo$= “bar”] selects all elements ending in bar
[foo*= “bar”] selects all elements in the foo attribute value that contain the substring bar
You can select elements based on strings in attributes

Select type for a specific property

[lang | = "en"]

The lang attribute is selected to be equal to en or all elements beginning with en

Descendant selector

  <style>h1 em { color: gray; Blockquote b, p b {} Blockquote b, p b {}</style>
Copy the code

Use descendant selectors to apply different styles to similar elements
```
<style>
     td.siderbar a:link{}</style>
Copy the code
```

Select child element

Word combination >
Select all child elements instead of descendant elements

Select adjacent sibling elements

H1 +p selects the adjacent sibling p after h1
H1 to p All p sibling elements after h1

Pseudo classes and pseudo elements

State pseudo-classes

  <style>
    :link {}

    :visited {}
      /* Visited can only change the color, privacy issues */
    
    :focus {}
		:hover {}
    /* tab */
    :active {}
    /* there is a sequence */
  </style>
Copy the code

Position of pseudo class

  <style>
    /* :first-child { border: solid 5px; } * /
    /* Select the first child of all parent elements, where HTML is also selected */
    :last-child {}

    /* Select the last child of all parent elements */
    :nth-chilid(n) {}

    /* Select the NTH child of the parent element */
    :nth-chilid(2n) {}
    :nth-chilid(2n+1) {}
    :nth-chilid(-2n+1) {}
    /* if n=0, select only the first */
    :nth-last-child(n){}
    /* The NTH */
    :nth-last-child(n+2){}
    :nth-child(n+3):nth-last-child(n+2){}
    /* After the third positive number, before the third from the last. * /
    :nth-child(n+3):nth-last-child(-n+7){}
    /* positive number three to positive number seven */
    odd even
    :first-of-type
    /* Categorize tags that have the same parent element by name, with the first */ in each category,:nth-of-type(n)
  </style>
Copy the code

The selector is inverted

  <style>
    :not(p) {}
    /* Can only write a single selector */
    :not(p):not(.foo){
      color: red;
    }
  </style>
Copy the code

Special selector

<style>
     :root {}
    /* Select the root element, which will basically select the HTML element. * /
    :empty {}
    /* Select empty elements with Spaces does not count */
</style>
Copy the code


      
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="" title="default">
<link rel="alternate stylesheet" href="" title="Big Test">
<link rel="alternate stylesheet" href="" title="Crazy colors!">
<style>
  :target {
    background-color: yellow;
  }
  /* The target selector selects an element */ whose ID is the hash after # in the url
</style>
</head>
<body>
<ul>
  <li id="top">Lorem <a href="#bottom">bottom</a></li>
  <li>Accusantium</li>
  <li>Fugiat</li>
</ul>
<div>
  <div>Lorem.</div>
  <div>Doloribus!</div>
  <div id="bottom">Eveniet. <a href="#top">top</a></div>
</div>
</body>
</html>
Copy the code

Form element state selector

  <style>
    :required{}
    :optional{} / * optional * /

    :valid{}
    :invalid{}   /*填错，填对*/

    :disabled{}
    :enabled{}  /* Enable Disable */

    :in-range{} /* imput number min max*/
    :out-of-range{}

    :checked{}  /* check */
   input:not(:checked){}

  </style>
Copy the code

The priority of the selector

(0,0,0,0) infinite base number of four digits
Id selector 0,1,0,0
Element selector, attribute selector, pseudo-class selector. 0,0,1,0
Element selector (tag selector), pseudo-element selector 0,0,0,1
The hyphen > + ~ does not participate in the priority operation
Wildcard * * * * 0,0,0,0
Inline style /inline style/inter-line style /inline style 1,0,0,0
! Important has properties that conflict with important, and the important will prevail.

color: red ! important;
The inherited style has no priority and is smaller than the finite level of *

  <style>
  #foo{
    color: red;
  }
  .bar{
    color: blue;
  }
  </style>
</head>
<body>
  <div id="foo">
    <span class="bar">color</span>
  </div>
</body>
Copy the code

This is blue because foo didn’t directly select span, and bar directly selected span and inherited styles have no precedence.
<font color="red">font</font>
- The color is inline. The priority is 0,0,0,0 and is at the beginning of the CSS file.

Cascading style

The important style is user-defined
Website author important style authored style
Site author Author common style
Custom common style custom.css
Default Style, built-in browser Style, User Agent Style
If the priorities are the same, they are listed in the order in which they appear, and the ones that appear later have a higher priority

Body :first-child Selects the element that has the first child in the body’s descendants

Value and digital

Number: multiple or times
Percentage: Judged by attribute relative to parent element, or relative to size. Percentages and pure figures are not interchangeable.
Color (R G B)
- hex color #HHHHHH
- hexa #ff00ff00
- ABC shorthand # # aabbcc
- RGB (R, G,b)(0-255,0-255,0-255) or use percentages
- rgba(r,g,b,0-1)
- HSL (Hue, Saturation, brightness)
The length of the
- Absolute unit of length
  - (ch) in inches
  - Cm cm centimeters
  - Mm mm millimeters
  - – Moz-MM Firefox browser
  - Pt Point 72 1/inch
  - PC PICa 1/6 inch
  - Not most of the time, depending on the resolution and system Settings, but it’s accurate when printing.
  - Unit of relative length
    - Px, CSS pixels. Different sizes of monitors have different pixel sizes.

.foo {
    font-size: 30px;
    width:10em
<! - 300 px wide - >
}
.foo {
    font-size: 30em;
    width:10em
   <! Font-size: 16px! Important; ">
}
Copy the code

<div class="foo">
    <p></p>
  </div>
  <style>.foo { font-size: 30px; } p { width: 10em; / / 2 450 px font - size: 1.5 em. //1 45px }</style>
Copy the code

Rem root element size, root element HTML
Ex x character height, almost useless. Some browsers will calculate it as 0.5em.
Ch 0 specifies the width of the character
One hundredth of the width or height of a VW/VH viewport, including scroll bars.
Vmax /vmin Vmax = Max (vw, vh) one hundred times the width or height of the viewport
Width: calc(2 * 30em-40%) 2* 30em-40% == Operator must have Spaces ==
The Angle
- Degree Angle 45deg 90deg
- Radian 3.14rad =180deg
- Turn – > 360 deg = 6.28 rad
- Transform: Rotate (20deg)
time
- 1s
- 1.1 s
- .2s
- .3s
- 1ms
- 1s =1000ms
hz
url
CSS keyword
string
Takes the value of the property

The font

Font family

Serif serif font
Sans-serif non-serif fonts
Monospace monospace font
Use a common font family

Body {font-family: sans-serif}, the browser will automatically select a font without serif lines.
Font-family: “MicroSoft YaHei”; }
If the specified font is not installed on the user’s computer, you can specify the degradation scheme.

Font-family: ‘Helvetica’, ‘Microsoft yahei’, sans-serif; } It is best to provide a font family name as a final degradation option. The English font comes first. Common font families must not be quoted.

Word again

font-weight
- normal
- Bold, Bolder, lighter
- Font weight: 100-900 must be a hundred
- inherit
In general, some fonts have predefined fonts with different word weights. So you can{font-family: 'Zurich Light'
Typically, specify the primary font, and then specify font-weight, which the browser can select from the font file, or calculate.

The shop name

Font: XX-samll, X-small, small, medium, large, X-large, xx-large
An absolute size has scaling factors of 1.5 and 0.66 for adjacent absolute sizes. For example, if medium is 10px, then large is 15px and small is 6.66px. But different browsers may have different scaling factors. So those keywords are useless.
Unit of percentage. The size relative to the parent element, the inherited value. It has almost the same effect as EM. The font size for HTML is 16px.
Fontsize always inherits the value of * after **** is computed, not the value of **** when * is written.
The unit of length, px

The font style and font variants

The font – style: normal | italic | oblique

Both of these are italics, but what’s the difference?

+ italic is another specially designed italic font * if the normal font is Roboto * the italic font might be Roboto italic, Roboto Cursive + Oblique is an italic character derived from regular text * while oblique is generally mapped to Roboto Slanted, Roboto Incline, and Roboto obliqueCopy the code

The font – variant: normal | small – caps |
- Small-caps: Write lowercase letters in uppercase letters that are smaller than they should be. Article title.
The text – transform: uppercase | lowercase | capitalize all lowercase letters (big) into a large (small). Capitalize each word

For example, the coupon code input box.

Font set writing

[font-style || font-variant || font-weight] font-size[ / line-height] font-family

The first three orders are not important. If the first three attributes have values normal, you can omit them. Line-height can be omitted, but must be followed by a/and font size.

Font -size and font-family must appear in the same order.

Text-dependent attributes

The text is indent with text-indent

Indent text can be filled with negative numbers, if large enough to hide text. But the element

The height is still there.

Percentage available, relative to the parent element. If you want to be relative to yourself, wrap a layer of elements of your own size.
Apply text-indent: -99999px, hide the text and “replace” the tag with a background image. -2em suspends the first line, and 2em indents the first line. Font-size: 0; But the font size will be inherited.
This property applies only to block-level elements, not inline elements.

Align text horizontally with text-align

Left | right | center | the justify aligned at both ends
Text-align only center text

Text is aligned vertically

line-height
Application: A single line of text is vertically centered and the line height is equal to the height of the text
Percentage relative to font size

	h1{
		font-size:40px;
		border: 2px solid;
		line-height:2;
}
 <! -- 200% descendant inheritance 80px write 2 descendant inheritance 2-->
Copy the code

vertical-align
- This attribute applies to inline elements
- Baseline: Aligns the element’s limit with the baseline of its parent element’s line box. If an element does not have a baseline, such as IMG or input, align its bottom with the outside text. This is true even if the line box has no text. Application, the picture is out of line with the bottom of the text
- Sub: The baseline of the element will be lower than the line text.
- Super:… high
- Bottom: Align the bottom of the target element with the bottom of the row
- Top: Align the top of the target element with the top of the row
- text-top
- The top/bottom of the text-bottom element is aligned with the top/bottom of the text
- Middle is not vertically centered. Instead, align the middle of the element with 0.5ex, or one-fourth, above the baseline.
- The numerical
- Percentage relative to its own line-height
- Only baseline, top, middle, bottom is valid when applied to a table. Other invalid.
word-spacing

The value is the x+15 value added to the spacing itself
- Normal: equal to 0
- What’s the length? The spacing is the width of the space plus this value. It can be negative.
Letter-spacing changes the spacing between children and parents.
Text-align: justify is used with word-spacing. The spacing of letters can change.
Given a specified value for letter-spacing, justification does not affect it.
text-transform
- Uppercase All letters become uppercase
- Lowercase all letters become uppercase
- Capitalize the first letter of each word
- Attribute effects precede font-variant
text-decoration
- Underline the underline
- On the overline crossed
- The line – through deleting lines
- The child element cannot remove the underscore from the parent element
text-shadow
Value: Horizontal offset, vertical offset, Blur radius, color. The color is black by default. Fuzzy radius can be left blank, 0, use commas to write multiple groups of shadows.
box-shadow

Horizontal offset, vertical offset, blur radius, diffusion radius, color; The next group;
White-space: Specifies how to handle whitespace and line feeds, as well as automatic line feeds.
Word-break how to break a specified word
overflow-wrap
Direction: LTR | RTL
unicode-bidi