CSS Introduction, Selector

CSS (cascading style sheets cascading style Sheet)-------presentation layer

The latest version of CSS3.0, a computer language capable of separating performance from content, mainly learns selectors and attributes in CSS

Take a look at the writing position of the CSS and the places you need to be aware of before learning

Writing position

1. Outer (external) style <link href= "CSS file path" rel= "stylesheet"/>

2. Embedding (inside page) style <style></style>

3. Internal (inline) style style= ""

Writing format

Selector {property: Property value}

Note: Multiple properties in CSS are separated by semicolons

Comment Method is/* Comment content */

Selector Selector

Base Selector

* Selector means getting all the tags in the HTML document, typically used in the wildcard (global) style

HTML selector (tag Selector) tag name {}

Class Selector. class Name {}

ID selector #ID值 {}

Relationship Selector

E F (descendant selector) The F element below the e element

E>f (subset selector) The subset element F of the E element

E+f (next to selector) sibling element F immediately following e element

E~f (brother element Selector) Select the sibling element F of the E element

Property Selector

E[ATTR] Element e with the attr attribute

E[attr= "value"] element with the Attr property whose property value is equal to value E

E[arrr^= "value"] element with the Attr property whose property value begins with value E

E[attr$= "value"] an element with the Attr property whose property value ends in value E

E[attr*= "value"] has an e element with the Attr property and its property contains value

Pseudo class Selector

: The style of active when the element is active

: The style before the link a tag was not accessed

: Visited a tag has been visited style

: Hover mouse-over style

Pseudo-Object selectors

E::before{content: "123";} Used in conjunction with the content property before the E element

E::after{content: "abc";} Often used with the content property after the E element

e::first-letter{color:red;} The first character of an E element's content

e::first-line{color:red;} The first line of the E element content

CSS Introduction, Selector