Home >Web Front-end >HTML Tutorial >CSS Basics 2??Selector_html/css_WEB-ITnose
CSS Basics 2??Selector_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:381181browse
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> 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> 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>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> 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> 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>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> 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> Looking back, is red <head><style type="text/css"> p:first-child{ color:red; } </style></head><body><div>歌声里</div><p>蓦然回首</p><p>然后呢？</p></body>The color without font content is red, because the first one in element is a div, not pPriority of selector : ID selector> Class selector> Pseudo-class selector> Element/pseudo-element selector> Wildcard selector