CSS basics 8: derived Selector

CSS basics 8: derived Selector

In CSS syntax, you can define styles Based on the context relationship of elements in their positions. You can make tags more concise.

In CSS1, selectors that apply rules in this way are called context selectors because they depend on

Context to apply or avoid a rule. In CSS2, they are called derivative selectors, but whatever you call them, their functions are

Is the same. The derived selector allows you to determine the style of a tag Based on the context of the document. By reasonably using the derived selector, we can

Make HTML code more clean.

For example, if you want the strong element in the list to be changed to italic, rather than the regular italic, you can define a derived choice.

Tool:

li strong {    font-style: italic;    font-weight: normal;  }

Note that Code context:

I am in bold, not italic, because I am not in the list, so this rule does not work for me

1. I am a italic. This is because the strong element is located in the li element.
2. I am a normal font.

In the above example, only the style of the strong element in the li element is italic, and no special class or id needs to be defined for the strong element.

Code is more concise.

 

The running result is as follows:

Next let's take a look at the common derivative selectors.

A descendant (include) Selector

The descendant selector is also called the include selector. The descendant selector can be used as an element of an element descendant. Select the child element of an element and set

Some styles.

(1) select elements based on Context

We can define the descendant selector to create some rules so that these rules play a role in some document structures, but they cannot be used in other structures.

. The above example is a demonstration of a standard descendant selector.

(2) syntax explanation

In the descendant selector, one end of the selector on the left of the rule includes two or more selectors separated by spaces. Space between selectors is a combination

. Each space character can be interpreted as "... in... find ","... as...... as... ", but must be from the right to the left

Read selector. Syntax: Selector selector [selector...] {}. There is a negligible aspect about the descendant selector, that is, the layered interval between two elements.

It can be infinite.

For example, h1 span {} span is nested in h1.

 

1234512345 12345 12345

12345

The running result is:

(3) There are also some complex child selector combinations:. test img {} and # header. btn.

Child element Selector

Compared with the Child selector, Child selectors can only select an element as a Child element. Stricter than descendant Selector

Grid, select the element of a child element, and set some styles.

(1) Select child elements

If you do not want to select any child element, but want to narrow down the scope and select only the child element of an element, use the child element selector.

For example, if you want to select only the strong element as the child element of the h1 element, you can write it as follows:

h1 > strong {color:red;}

This rule changes the strong element under the first h1 to red, but the second strong element is not affected:

This isVeryImportant. This isReallyVeryImportant.

 

The running result is:

(2) syntax explanation

You should have noticed that the child selector uses a greater than sign (Child Delimiter ). The Child Delimiter can have a blank space on both sides. This is optional. Therefore

, There are no problems with the following writing methods:

h1 > strongh1> strongh1 >strongh1>strong

If you read from the right to the left, the selector h1> strong can be interpreted as "select all strong elements as child elements of h1 ".

(3) combine the child selector and child Selector

See the following selector:

table.company td > p {}

The following selector Selects all p elements as sub-elements of the td element. The td element inherits from the table element, and the table element has

Contains the class attribute of company.

Third CSS adjacent sibling Selector

The adjacent sibling selector can select the element next to the other element, and the two have the same parent element.

(1) Select adjacent brothers

If you want to select an element that is next to another element and has the same parent element, you can use an adjacent sibling selector.

For example, if you want to add the top margin of a paragraph that appears next to the h1 element, you can write it as follows:

h1 + p { color:#FF0000;}

This selector reads: "select the paragraph that appears immediately after the h1 element, and the h1 and p elements have the same parent element ".

 

 

This is a heading.

This is paragraph.

This is paragraph.

This is paragraph.

This is paragraph.

This is paragraph.

 

The running result is:

(2) syntax explanation

The adjacent sibling selector uses the plus sign (+), that is, the adjacent sibling separator. Note: similar to the Child Delimiter, the adjacent sibling delimiter can be empty.

Whitelist.
See the following document tree snippet:

• List item 1
• List item 2
• List item 3

1. List item 1
2. List item 2
3. List item 3

In the preceding snippet, The div element contains two lists: an unordered list and an ordered list. Each list contains three list items. These two

List items are adjacent brothers, and list items are also adjacent brothers. However, the list items in the first list are not adjacent to the list items in the second list.

Younger brother, because the list items of the two groups do not belong to the same parent element (a maximum of two groups can be regarded as cousins ).

Remember, you can use only one separator to select the second element of two adjacent siblings. See the following selector:

li + li {font-weight:bold;}

The selector above only changes the second and third items in the list to bold. The first list item is not affected.

The running result is:

 

 

(3) combine with other selectors

 

Adjacent siblings can also be combined with other separators:

html > body table + ul {margin-top:20px;}

This selector is interpreted as: select all the sibling ul elements that appear next to the table element. The table element is contained in a body element,

The body element is a child element of an html element.