CSS of front-end knowledge points (Ii.)

CSS selectors, with tag Selector, ID selector, class selector, correlation selector, combo selector, attribute selector, respectively

① Tag Selector

Example code:

650) this.width=650; "Src=" Http://s3.51cto.com/wyfs02/M01/86/81/wKioL1fBQZizssF6AAB0BfWO57E564.png-wh_500x0-wm_3 -wmp_4-s_3212615100.png "title=" tab selector. png "alt=" wkiol1fbqzizssf6aab0bfwo57e564.png-wh_50 "/>

Operation Result:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/86/81/wKioL1fBQcGB-YNkAABcnV28rbM045.png "title=" The display effect of the tag Selector. png "alt=" Wkiol1fbqcgb-ynkaabcnv28rbm045.png "/>

②id Selector

The ID selector starts with # and the ID of the selector cannot be duplicated-that is, each time a selector is called, and one cannot be called multiple times in one HTML

Example code:

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/86/7F/wKioL1fA_7KRezx5AADPwedNfi8436.png "title=" QQ picture 20160827104550.png "alt=" Wkiol1fa_7krezx5aadpwednfi8436.png "/>

The results of the operation are as follows:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/86/7F/wKiom1fA_5uyM-8XAABRmVFKJaY541.png "title=" Run the result. png "alt=" Wkiom1fa_5uym-8xaabrmvfkjay541.png "/>

③class selector (or class selector)

Start with a small dot (.), command for. C1,. C2,. NET, etc.

Example code:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/86/7F/wKioL1fBA4DzO-UUAACjv7FXCzI490.png "title=" Class selector. png "alt=" Wkiol1fba4dzo-uuaacjv7fxczi490.png "/>

The effect of the output:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/86/7F/wKioL1fBA5bzY5zpAABy5Yw7Vig823.png "title=" Class selector output effect. png "alt=" Wkiol1fba5bzy5zpaaby5yw7vig823.png "/>

④ Associated tags, if you want to set a common property for the same tag in an HTML page, you can use the associated tag

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/86/81/wKiom1fBPu7DDL6aAACxp8Od7tA785.png "title=" Associated label. PNG "alt=" Wkiom1fbpu7ddl6aaacxp8od7ta785.png "/>

Display effect:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/86/81/wKioL1fBPwSjn3LPAABGI4OK2Ds972.png "title=" The associated label. PNG "alt=" wkiol1fbpwsjn3lpaabgi4ok2ds972.png "/> off associated labels can refer to a defined style on the perimeter label of the label of the preset value, Then, by specifying which tags use that style to achieve the style settings for the target label, the perimeter label is Div, the target tag is Li, and the predefined style is. Container,li is the style to use, that is, all the LI tags under the. Container use " background-color:red; " Style.

Usually in the use of the time four selectors are the most of the class selector and association selector, so for the label selector and the ID selector with relatively few, focus on the following two kinds of selectors.

⑤ Combo Selector

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/86/81/wKioL1fBTrzDbU8bAACUpGSMRFo039.png "title=" Combo selector. png "alt=" Wkiol1fbtrzdbu8baacupgsmrfo039.png "/>

⑥ Property Selector

When a tag of the same type in an HTML file has multiple types. For example, if you have more than one input tag, but you use only one style for the input label of the text type, you can specify a specific type label by using the property selector

Example code:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/86/81/wKioL1fBS0XDN8GWAADX7nLDCmI553.png "title=" Property selector. png "alt=" Wkiol1fbs0xdn8gwaadx7nldcmi553.png "/>

Display effect:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/86/81/wKioL1fBS1_CjQCbAABKJlyQcoM843.png "title=" The Properties tab displays the effect. png "alt=" Wkiol1fbs1_cjqcbaabkjlyqcom843.png "/>

This article from "Flat Light is true" blog, please be sure to keep this source http://ucode.blog.51cto.com/10837891/1843252

CSS of front-end knowledge points (Ii.)