CSS advanced Selector

CSS advanced Selector

Chapter 8 css beginners

1. Attribute Selector

 

Selector	Description
[Attribute]	Used to select elements with specified attributes.
[Attribute=Value]	Used to select elements with specified attributes and values.
[Attribute~ =Value]	Used to select elements whose attribute values contain the specified vocabulary.
[Attribute| =Value]	Used to select an element with an attribute value starting with a specified value. The value must be the entire word.
[Attribute^ =Value]	Matches each element whose attribute value starts with a specified value.
[Attribute$ =Value]	Matches each element whose attribute values end with a specified value.
[Attribute* =Value]	The matching property value contains each element of the specified value.

Note: IE (up to Version 5.5) does not support attribute selectors.

 

2. Near family Selector

1 <! DOCTYPE html> 2 
Sibling element: has the same parent.
Kinship element: If the second in the source code appears after the first one, they are close relatives.
As shown above, <li> with id html and java is a close element, while <li> with java and css is a close element, but <li> with html and css is not a close element.
Note: The kinship selector selects two relatives, but applies the declared style to only the second of the two.
Therefore, only the fonts of JAVA and CSS in the above programs are red, while HTML is the default color.

 
3. For the <dl> label, the near relation selector is used to add or delete borders, fills, and borders.
<Dl> the label defines the definition list ).
<Dl> A tag is used to combine <dt> (a project in the definition list) with <dd> (a project in the description list ).
1 <! DOCTYPE html> 2