Lesson03_02 style rule selector _ basic tutorial

Lesson03_02 style rule Selector Style rule Selector

Author: Loncer more learning resources available at: wwww.loncer.cn

• HTML selector

  The HTML Tag is used as the selector. In this way, all HTML tags are displayed in accordance with the defined statements on all CSS pages.

• Class selector
  To divide the webpage elements created by an HTML tag into several types, set the class of the HTML tag to different values:

  For example: P1 P2 P3

  The style is defined as follows:

  NOTE: If selector is directly followed by class Name (.) when defining a style sheet, this style rule applies to all HTML tags whose class is class = class Name.Class selector is divided into two classes:
  
  
  1. Associated class selector: HTML Tag name. class Name (different rules can be defined for the same element ).
  2. Independent class selector:. class Name (same style rules can be defined for different elements ).
• The ID selector ID attribute is used to define a specific HTML element. Only one element in a webpage file can use a specific ID value.

  Webpage: Text here

  The style is defined as follows:

• An association selector is a string consisting of two or more single selectors separated by a space.
  For example:
  P em {background: yellow}
  The "p em" is the Association selector, which indicates

  In the tag pairThe background of the content between tag pairs is yellow.The content in the tag pair is not affected.
  Note: the priority of the associated selection rule is higher than that defined by a single selector.

• To reduce repeated declaration of a style sheet, you can combine several selectors in a style rule definition.
  Example: H1, H2, H3, H4, H5, H6, TD {color: red}
• A pseudo-element selector is a definition of the various States of the same HTML element and part of the content contained in the package.
  Format: HTML element: pseudo element cycle law {attribute: Value}

  Common pseudo elements are as follows:

  Element name	Function
  A: active	Status when a hyperlink is selected
  A: hover	Move the cursor over the hyperlink
  A: link	Status when no action exists
  A: visited	Accessed hyperlink status
  P: first-line	The first line of text in a paragraph
  P: first-letter	The first letter in the paragraph

  
  The class selector can be used with pseudo elements:
  HTML element. Class Name: pseudo element {attribute: Value}