CSS selectors and rules

The selector

1. Basic selectors

• * Wildcard selector

  Represents all elements, usually with another selector

  * {margin:0;padding:0; }p * {color:red; } / / willpThe text of all contained elements becomes redCopy the code

  Special use: Construct non-subselectors

  section * a {font-size:1.3 em; } // Any yessectionThe grandchild element, not the child elementaThe tag will be selected. As for theaWhat is the parent element of, it doesn't matterCopy the code

• Element tag selector

  Tag selector that matches all elements that use the tag

      p{font-size:0.26 rem; } / / setpOf the labelCopy the code

• .class class selector

  Select an element with a specific class directly; the class of the element is not unique

     p.specialtext {color:red; }// Tag and class selector to select only paragraphs with specialText classCopy the code

• # id selector

  Select the element with the id value directly. The id of the element is unique

  ID is used in in-page navigation. For example, [Biography](#bio) can be used to navigate to the bio element whose ID is bio. The empty href doesn’t behave like a normal link

     #specialtext// Select the element with id specialTextCopy the code

2. Combinatorial selector

• Descendant selector

  Tag 1 Tag 2

  A set of space-separated label names that are selected as descendants of the specified ancestor element

  article p{font-size:.18rem} / / choicearticleoffspringpElements, indirect descendants are also selectedCopy the code

• Child selectors

  Tag 1> Tag 2

  Tag 2 must be a child of tag 1, and tag 1 must be a parent of tag 2

  It must be a direct relationship between father and son, not an indirect ancestral relationship

  p>span{font-size:.18rem; } / / choicepThe child elementsspan
  Copy the code

• Next to the element selector

  Tag 1+ tag 2

  Tag 2 must be immediately followed by tag 1 of the sibling element

  p+span{color:red; } / /pBehind the labelspanElement, must followpThe labelCopy the code

• Sibling element selector

  Labels 1 to 2

  Tag 2 must be the sibling of tag 1, but not necessarily immediately following it

• Multiclass selectors

  .class1.class2

  Select an element with both class names. Note that you cannot add Spaces here. Adding Spaces will make the ancestor/descendant relationship

  .specialtext.featured {font-size:120%; }Copy the code

• Property selector

  Property name selector

  Tag name [attribute name]

  Select any tag with an attribute name

  img[title] {border:2pxsolid blue; }// Select all with the title attribute nameImgTag // When the user moves the mouse over the image, the browser displays a prompt bar (generated from the text in the title property). In general, people often give the Alt and title attributes the same value. The text in the Alt attribute is displayed if the image does not load for some reason, or is read aloud by the screen reader. The title property displays a prompt containing text when the user moves the mouse over the image.Copy the code

  Property value selector

  Tag name [Attribute name =" attribute value "]

  Select any tag name with a property name whose value is the property’s value. This selector allows you to control what the property’s value is

  p[class='box1']// Select the class attribute box1pThe labelCopy the code

3. The pseudo class

• The UI pseudo-classes

  CSS styles are applied to HTML elements when they are in a state, such as when the mouse pointer is over a link

  ① Four states of link pseudo class

  1) The link is there for the user to click on

  2) Vsited users have clicked on this link before

  3) hover mouse pointer is hovering on a link

  4) Active link being clicked (mouse down on element, not released)

  a:link {color:black; }// Some pseudo-classes can be used for any element, not justaElements, such aspThe element also has the hover pseudo-classCopy the code

  (2) : focus pseudo class

  The text field in the form gets focus when the user clicks on it before the user can enter characters into it

  input:focus {border:1pxsolid blue; }// will be in the cursor positioninputField, add a blue border to the field. This allows the user to know exactly where the typed character will appear, rightCopy the code

  (3) the target class

  If the user clicks on a link to another element on the page, that element is the target, which can be selected with the: Target pseudo-class

  <a href="#box< / "> box elementa>
  <h2id='box'>surprise! </h2>// Located elsewhere on the page#box:target {background:#eee; }// A light gray background is added to the element with ID box when the user clicks the link.Copy the code

• Structured pseudo-class

  When there is some kind of structural relationship in the tag (such as an element being the first or last in a set of elements), CSS styles are applied to the corresponding element

  Child and: (1) : first – last – the child

  :first-child represents the first element in a set of sibling elements, while :last-child represents the last

  (2) the NTH child (n) –

  E denotes the element name and n denotes a number (odd or even can also be used), often used to improve the readability of the table

4. The pseudo elements

Elements that appear to be present in the document but are not

• ::first-letter selects the first character

  p::first-letter{font-size:300%; }// If you do not use a false element to create the first character magnification effect, you must manually add < to the letter.span> tag, then apply a style to the tag. The pseudo-element actually adds an invisible label to us.Copy the code

• ::first-line Selects the first line of the text paragraph

• ::before and ::after are used to add special content before or after specific elements

  <p class="box">this is text</p>
  p .box::before{content:'construction'; }p .box::after{content:'over'; } / / eachcontentProperty values contain Spaces so that there is an appropriate margin in the output. Construction: This is text overCopy the code

  The search engine does not retrieve information about the pseudo-element (because it does not exist in the tag). Therefore, don’t use pseudo elements to add important content that you want the search engine to index.

To resolve conflicts that arise when an element is selected and influenced by multiple rules and determine which rule “wins” and is ultimately applied, CSS provides three mechanisms: inheritance, cascading, and specialisation (weights).

5. Inheritance

• Ancestor elements in CSS can pass CSS property values to their descendants

• The body is the ancestor of all elements, and all tags are its descendants

  body {font-family:helvetica, arial, sans-serif; } // All elements in the document, no matter how far down in the hierarchy, will inherit these stylesCopy the code

• There are also many CSS properties that cannot be inherited because it makes no sense to inherit them. These properties are mainly related to the positioning and display of element boxes, such as borders, margins, and inner margins.

• Because fonts and text styles are inheritable, be careful when using relative font units such as percentages and em. If the font size of a label is set to 80% and the font size of one of its descendants is also set to 80%, the final font size of that descendant text will be 64% (80% of 80%). This may not always be what you want.

6. Cascade

• Cascading, the cascading of cascading stylesheets, is the process of stacking styles layer by layer at the document level in order to expose the browser to multiple sources of a particular attribute value for a tag and determine which value to ultimately use.

• Style source

  The order in which the browser stacks the styles of various sources

  ① Browse the paint default style sheet

  ② User style sheets (uncommon)

  ③ Author link style sheet (page link order)

  ④ Author embedding style

  ⑤ Author in-line style

  The browser checks the styles of each source in the above order and updates the Settings for each tag attribute value, if defined. After the check and update process is complete, each label is displayed in the final style

• Cascading rules

  ① Find all declarations applied to each element and attribute

  When the browser loads each page, it identifies all affected HTML elements based on each CSS rule it finds

  ② Sort by order and weight

  The browser checks each of the five sources in turn and sets the matching properties.

  If the matched attribute is also defined in the next source, the value of that attribute is updated, and so on until all five sources of the affected attribute for all tags in the page are checked. The final value of an attribute is displayed with whatever value is set.

  Statements can also have weights. You can add weights to individual declarations as follows

  p {color:green ! important; font-size:12pt; }

  The blank space! Important (;) Use caution when adding weight to a statement, which may cause personal Settings not to take effect

  ③ Sort by special index

  Specificity: Indicates how specific a rule is

  The specificity of a rule is determined by how many labels, class names, and ids its selectors contain.

  ④ The order determines the weight

  If both rules affect the same attribute of an element, and they have the same specificity, the rule most in the bottom position (or declared last) wins

7. (weight)

• Each selector is evaluated using the ‘ICE’ rule

  ICE is not really a three-digit number, but most of the time it treats the result as a three-digit number, and the winner with the largest three-digit number wins. However, 0-1-12 is still more specific to 0-2-0 than 0-2-0.

  ② The dash between three letters is a separator, not a minus sign.

  ③ Calculation rules

  1) If there is an ID in the selector, add 1 to I;

  2) If there is a class in the selector, add 1 to C;

  3) If there is an element (tag) name in the selector, add 1 to E;

  4) Get a three-digit number.

  ​

  In addition, each selector is more specific than the previous one

8. Rule declaration

The CSS property values are classified into three types

• Text values: All Css has text values

  The visibility attribute has the values visible and hidden, and the border-style attribute has the values solid, consistent, and inset

• Numeric values: Used to describe the various lengths of elements (in CSS, “length” has a broad meaning, including height, width, thickness, and so on).

  There are two main types of numerical values: absolute and relative

  ① Absolute value: describes a real length such as 6 inches

  ② Relative value: relative to other benchmarks such as percentage, EM, ex

• Color values: You can specify color values in several ways. These can be mixed together in the same stylesheet

  1) color name

  You can specify color properties using either the name of the color, or the official term is color keyword. In general, color keyword is most commonly used to specify white and black.

  ② Hexadecimal color (#RRGGBB or #RGB)

  If each pair of three confrontations is two identical numbers, the shorthand #RGB can be used

  #000 Pure black #44475% Grey #888 50% grey # BBB 25% grey # FFF Pure white

  ③ RGB color value

  Each color can be specified with a value between 0 and 255 (inclusive).

  rgb(r,g,b)

  ④ RGB percentage value (R%,G%,B%)

  ⑤ HSL(Hue, saturation %, brightness %)

  An HSL (0, 0, 0%)

  The first value represents the hue, that is, an actual color, all of which go around the hue ring (color wheel), and the hue value is represented by degrees on the circle

  6 Alpha channel

  RGB and HSL both support Alpha channels, which are used to set the color’s opacity (in other words, how much background can be seen through).

  The corresponding formats are called RGBA and HSLA respectively.

  The A (alpha) value in either format can be either 1 (completely opaque) or 0 (completely transparent), or A small value between 1 and 0