CSS Basics 2??Selector_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS Basics 2??Selector_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:56:38

Original

1133 people have browsed it

I mentioned style rules before, and I also know that the syntax of style rules is: selector declaration block

For example: div{ color: black; padding: 10px; } div means selector ( Here is the element selector), and the content within the curly braces is the declaration block.

The selector is used to specify which element or elements in the HTML document the style rule can act on. Common selector types are as follows:

1. Element selector (type selector) : Any HTML element on the web page that matches the selector, regardless of whether these elements are in the document position in the tree.

For example: p{ background:aqua; color:pink; } Matches any p element on the web page, regardless of the position of the p element in the document tree

2. Class selection Tool: is used to select any HTML element with a certain class attribute. Syntax: .class name {attribute: value;}

<head><style type="text/css">	.hello{		width:100px;		height: 100px;		background: #eee;		color: blue;		font-weight: bold;	}	</style></head><body><span style="white-space:pre">	</span><div class="hello">类选择器</div></body>

Copy after login

The same class attribute value can appear multiple times on the same page

3. ID selector: is used to select a certain ID attribute Any HTML element, syntax form: #id name { attribute: value;}

<head><style type="text/css">	#hello{		width:100px;		height: 100px;		background: #eee;		color: blue;		font-weight: bold;	}</style></head><body><span style="white-space:pre">	</span><div id="hello">ID选择器</div></body>

Copy after login

The same ID attribute value can only appear once on the same page

4. Wildcard selector: is used to select all elements, syntax: *{Attribute: value}
5. Containment selector : is used to select documents Descendant elements of an element

First method:

<head><style type="text/css">	p span{		font-weight: bold;		color:red;	}	</style></head><body><p>how <span> are</span> you?</p></body>

Copy after login

Second method

<head><style type="text/css">	p>.sp{		font-weight: bold;		color:red;	}	</style></head><body><span style="white-space:pre">	</span><p>how <span class="sp"> are</span> you?</p></body>

Copy after login

6. Pseudo-class selector : Four different states of the hyperlink element that are formatted differently
a :link{} Selector for unvisited links

a:visited{} Selector used for visited links

a:hover{} Selector used for links over which the mouse cursor is placed The hover can also be used in other elements to make style editors when the mouse cursor is placed on the target.

a:active{} is used to gain focus (for example: Selector

<head><style type="text/css">	.a:link{color: #000;}	.a:visited{color: #ff0;}	.a:hover{color:red;}	.a:active{color:black;}</style></head><body>	<a href="#" class="a">点点点</a>	</body>

Copy after login

7. Pseudo element selector :

( 1) :first-line Selector for the first line of an element

Such as the first line of a paragraph

<head><style type="text/css">	p:first-line{		color:red;	}</style></head><body><p>hello<br/>world</p></body>

Copy after login

Only hello is red

( 2) :first-letter is a selector for the first character of an element

, such as the first character of a paragraph

<head><style type="text/css">	p:first-letter{		color:red;	}</style></head><body><p>蓦然回首</p></body>

Copy after login

and only the words 蓦 are red.

(3) :first-child Selector for all contents of whose first element is ( :first-child)

<head><style type="text/css">	p:first-child{		color:red;	}</style></head><body><p>蓦然回首</p><p>然后呢？</p></body>

Copy after login

Looking back, is red

<head><style type="text/css">	p:first-child{		color:red;	}	</style></head><body><div>歌声里</div><p>蓦然回首</p><p>然后呢？</p></body>

Copy after login

The color without font content is red, because the first one in element is a div, not p

Priority of selector : ID selector> Class selector> Pseudo-class selector> Element/pseudo-element selector> Wildcard selector