Four CSS selectors and derived selectors

The CSS derivation selector allows you to determine the style of a label based on the context of the document. Before you learn to derive, learn the basic CSS selectors. As mentioned in the previous article, the position of the selector is as follows:

CSS Selector

Divided into several basic selectors: element selector, ID selector, class selector, property selector

1. Element Selector

{color:black;}  {color:blue;}  {color:silver;}

2.id selector: Specifies the style for the HTML element that specifies the ID.

{color:red;}  {color:green;}

In HTML code, use the

<id= "Red"> This paragraph is red. </ P > <  ID= "Green"> This paragraph is green. </ P >

Note: The id attribute can only appear once in each HTML document.

3. Class Selector: Specifies the style for all HTML elements that have the class.

{text-align: Center}

Used in HTML:

<class= "center">This heading'll becenter-aligned  </H1><class= "center"> This paragraph'll also be center-aligned. </ P >

4. Property selector: Sets the style for the HTML element that owns the specified property, not just the class and ID attributes.

                  The     Property Selector is a HTML5 rule. IE7 above and included! DOCTYPE, you can use this rule. Specific rules no longer repeat, because to use to really understand the meaning of each, the following table   you just know the concept, when used, you can click on the link to see the specific meaning of each item.

Selector

Selector	Description
[attribute]	Used to select an element with the specified attribute.
[attribute=value]	Used to select an element with the specified attributes and values.
[attribute~=value]	Used to select the element in the attribute value that contains the specified vocabulary.
[attribute|=value]	Used to select an element with an attribute value that begins with the specified value, which must be the entire word.
[attribute^=value]	Matches each element of the property value to the beginning of the specified value.
[attribute$=value]	Matches each element of the property value to the end of the specified value.
[attribute*=value]	Matches each element of the property value that contains the specified value.

The property selector has several common uses:

• {color:red;} /* Turn all elements that contain title into red */

  {color:red;} /* apply the style only to a element that has an HREF attribute */

  {color:red;} /* apply a style to a element that has both a property href and a title */

  {Border: 5px solid red;} /* all images with ALT attributes apply styles to highlight these valid images, an example that is more suitable for diagnosing than designing, i.e. using this style to determine whether an image is actually valid. */

  The property selector is useful in XML documents because the XML language advocates specifying element and attribute names for the purpose of elements and attributes.

   <  planet  >  Venus</ planet  >  <  planet  moons  = "1"  >  Earth</ planet  >  <  planet  moons  = "2"  >  Mars</ planet  >  

  {color:red;}

In addition, the attribute must match the property value exactly,

• <class= "Important warning">This paragraph is a very important warning. </ P >

  {color: red;}

The concept of selector grouping has been mentioned before, that is, the same style of the same group no longer repeat, for example:

{color:gray;}

The wildcard selector matches all elements, and the following example represents the color of each element in the document as red.

{color:red;}

CSS Derivation selectors

1.id selector and derivation selector

{    font-style: Italic;     text-align: right;     margin-top: 0.5em;    }

The above style will only apply to paragraphs that appear in an element with an ID of sidebar.

2.class Derived selectors

{    color: #f60;     background: #666;    }

The above style refers to the table cell TD in a larger element with the class name fancy, which is shown in gray background orange text.

• In addition, elements can be selected based on their classes:

• td.fancy {    color: #f60;    Background: #666;    }

  The above refers to the style that the TD with the class name fancy will have.

• CSS multi-class selectors, which link two kinds of names together, can select only the elements that contain these class names at the same time, and the class name order is unlimited.

• <class= "Important warning">Thisparagraph is a very important Warning. </ P >

  <class= "Important Urgent warning">Thisparagraph is a Very important and urgent warning. </ P >

  In both cases, the following rules can be used to match:

  {background:silver;}

  However, if the class name is only important or urgent, the rule does not match.

• The difference between class selector and ID selector:
• The ID selector can be used only once in a document, and the class selector may specify a class for any element.
• The ID selector cannot be used in conjunction because the ID attribute does not allow this list to be separated by spaces. Class selectors can be used in multiple classes.
• The same point is that class selectors and ID selectors may be case-sensitive .

descendant Selector

{color:red;}

Child element Selector

The child element selector can only select elements that are child elements of an element, that is, only children, not grandchildren, as compared to descendant elements.

{color:red;}

Adjacent sibling selector

You can select an element immediately following another element, and both have a common parent element.

{margin-top:50px;}

Read as, select the paragraph that appears immediately after the H1 element, and the H1 and P elements have a common parent element.

Four CSS selectors and derived selectors