Css3 learning + practice (1)

I recently felt that CSS learning is a bit messy. I would like to summarize this opportunity.

For Web developers, CSS is the language used to render HTML and render elements of relative applications. Therefore, it is very important to select the corresponding elements.

CSS Selector

1: Basic selector (this is a common part );

2: attribute Selector;

3: pseudo-class selector

I. Basic Selector

This is basically what we often use: class selector (. Class); Id selector (# ID); wildcard selector (*); element selector (E );

Descendant selector (e f): Selects all descendant f elements of the E element. No matter how many layers of the relationship F has in E, It is selected;

Child element selector (E> F): child element selector E> F, where F is only a child element of E.

Adjacent sibling element selector (E + F): an adjacent sibling selector can select an element immediately after another element, and theyHas the same parent Element;IE6 does not support this Selector

Common sibling selector (E ~ F): This selector Selects all the sibling elements behind an element. They are similar to adjacent sibling elements,Must be in the same parent ElementIn other words, the E and F elements belong to the same parent element, and the F element is after the Eelement, then E ~ F SelectorSelect the F element after all the eElementsIE6 does not support the usage of this Selector

Group selector: A group selector groups elements of the same style. Each selector is separated by a comma (,).

Ii. Attribute Selector

Attribute Selector: Its main function isSet styles for HTML elements with specified attributes. With the css3 attribute selector, you can specify only one attribute of an element, or you can also specify an attribute of an element and its corresponding attribute values.

 

The attribute selectors of css3 mainly include the following:

1. E [ATTR] : only attribute names are used, but no attribute values are determined.
2. E [ATTR = "value"] : Specifies the attribute name and the attribute value;
3. E [ATTR ~ = "Value"] : Specifies the attribute name and has an attribute value. This attribute value is a word list separated by spaces, the word list contains a value word , and the "~" before the equal sign cannot be written.
4. E [ATTR ^ = "value"] : Specifies the attribute name and has a property value, the property value starts with value.
5. E [ATTR $ = "value"] : Specifies the attribute name and has a property value, and the property value ends with value.
6. E [ATTR * = "value"] : Specifies the attribute name and has a property value, and the owner value contains value.
7. E [ATTR | = "value"] : Specifies the attribute name, and the property value is a value or a value starting with "value-" (for example, ZH-CN);

~ : Indicates that several attribute values separated by spaces contain "value" ^: Value starting with "value" $: Value ending with "value" *: Value containing "value" |: starting with value or value-

 

Among the seven attribute selectorsE [ATTR = "value"] and e [ATTR * = "value"] are the most practical elements. E [ATTR = "value"] can help us locate different types of elements, in particular, operations on form elements, such as input [type = "text"] and input [type = "checkbox, E [ATTR * = "value"] can help us match different types of files on the website. For example, different icon icons are required for links of different file types on your website, to help your website improve user experience, just like the previous instance, you can use this attribute ". doc ",". PDF ",". PNG ",". ppt "configures different icon.

IE6 does not support attribute selectors.