CSS Selector (Part 1)

Selector Overview Example:

{    color: red;}

Explain:

This is a full CSS rule (tag Selector).
Strong is called a selector, and it chooses that rule to be applied to that element of the DOM.
The part inside {} is a declaration that contains multiple rules. Each rule is separated by '; '.
color is the keyword.
Red is the value of the keyword.

In addition to the tag selector, there are other categories of selectors. It is divided into basic selectors, relationship selectors, pseudo-class selectors, pseudo-element selectors.

Basic selector:

E	Tag Selector	Strong {}	Select elements that use <strong> tags
Id	ID Selector (property selector)	#1111 {}	Select the element with id = "1111"
Class	Class Selector (property selector)	. Books {}	Select the element of class = "Books"
*	All elements	* {}	All elements

Example:

Html:

<class= "key"  ID= "principal">

Css:

{  background: red;}  {  font-size: 30px;}  {  color: green;}  {  font-weight: bolder;}

Property selector:

[attr]
Select the element that has the "attr" attribute.

[Attr=value]
Select the element that has the Attr property and the property value is "value".

[Attr~=value]

Select the element that has the Attr property, which contains the word "value".

[attr|=value]

Select the element that has the attr attribute with the value "value" or "value-xxx", which is commonly used for language attribute selection (lang= "en_US").

[attr^=value]

Select the element that has the Attr property, with the property value prefixed with "value".

[attr$=value]

Select the element that has the Attr property with the attribute value as "value" as the suffix.

[attr*=value]

Select the element that has the Attr property, which contains the value of "value" in the property value.

[attr operator value i]

Add before the end square brackets (])! , which causes the match of "value" to ignore the case.

Example:

Html:

<Divclass= "Hello-example">    <ahref= "http://example.com">中文版:</a>    <spanLang= "en-US EN-GB en-au En-nz">Hello world!</span></Div><Divclass= "Hello-example">    <ahref= "#portuguese">Portuguese:</a>    <spanLang= "PT">Olámundo!</span></Div><Divclass= "Hello-example">    <ahref= "http://example.cn">Chinese (Simplified):</a>    <spanLang= "ZH-CN">Hello World!</span></Div><Divclass= "Hello-example">    <ahref= "http://example.cn">Chinese (Traditional):</a>    <spanLang= "ZH-TW">Hello World!</span></Div>

Css:

/*All spans with a "lang" attribute is bold*/Span[lang]{Font-weight:Bold;}/*All spans in Portuguese is green*/span[lang= "PT"]{Color:Green;}/*All spans in US 中文版 is blue*/span[lang~= "en-us"]{Color:Blue;}/*Any span in Chinese is red, matches simplified (ZH-CN) or traditional (ZH-TW)*/span[lang|= "en"]{Color:Red;}/*All internal links has a gold background*/a[href^= "#"{Background-color:Gold}/*All links to URLs ending in ". CN" Is red*/a[href$= ". cn"]{Color:Red;}/*All links with ' example ' in the URL has a grey background*/a[href*= "Example"]{Background-color:#CCCCCC;}/*All email inputs has a blue border*//*This matches any capitalization of "email" , e.g. " email", "email", "email", etc.*/input[type= "Email" i]{Border-color:Blue;}

Relationship selector:

B + E	Select e element, E is the next sibling element of element B
E:first-child	Select the e element, E is the first child element of its parent element
A > E	Select e element, E is a child of element a
A E	Select the e element, E is the descendant element of the A element

Example:

Html:

<ul>  <Li>One</Li>  <Li>Both</Li>  <Li>Three</Li></ul><Div>  <span>Span 1.    In the Div. <span>Span 2. In the span of that ' s in the Div.</span>  </span></Div><span>Span 3. Not in a Div.</span><ul>    <Li>        <Div>Item 1</Div>        <ul>            <Li>Subitem A</Li>            <Li>Subitem B</Li>        </ul>    </Li>    <Li>        <Div>Item 2</Div>        <ul>            <Li>Subitem A</Li>            <Li>Subitem B</Li>        </ul>    </Li></ul><span>This is not red.</span><P>Here is a paragraph.</P><Code>Here is some code.</Code><span>And here is a span.</span>

Css:

{  color: red;}  { background-color: White;}  {  background-color: dodgerblue;}  { list-style-type: disc;}  { list-style-type: circle;}  {  color: red;}

CSS Selector (Part 1)