Pseudo-element
Pseudo-elements can be used to select some special element position
First, a paragraph style is defined
- : first-letter initials (for block elements only)
- : first-line of the first row
1, p is set to the first element in the character color is yellow, font 30px
p:first-letter{color:yellow;font-size:30px;}
<P> This is a paragraph </ p>
2, the first line of p set the background color is green (write point)
p:first-line{background-color:green;}
Two, front and rear portions of the element
- : before a partial front element (hereinafter immediately following start tag)
- : after a partial rearmost element (against the front end of the label)
Before and after the general content should be combined with the use of this style, add some content to the position before or after by content.
Because content is added by adding the css so you can not check this part.
1, add text after the p element
p: after {content: "appears at the end face of the element"; color: blue;}
2, the text added in front of the element p (pseudo-earth element content inserted "will appear first element" This section is not checked)
p: before {content: "front element appears"; color: orange;}
Attribute selectors
Press attribute selection element, can be formatted to the element having a given attribute or attribute value, the element to be set according to attribute selection
Grammatical structures :
No1 , first selector (selector element to examine their attributes)
NO2 , then enter the name of the attribute (the name of the element to examine properties)
Square brackets [], encompassing the object attributes and target.
NO3 , select the appropriate attribute selector, the selector attributes are:
- [Property name] matching specific properties, do not ask what specific property value
- [Attribute name = "value"] attribute value of qualifying elements will be selected
- [Attribute name ~ = "value"] attribute value contains the value of the element will herein be selected (attribute values may also contain other elements, separated by spaces between different attribute values) must match the full word, not a part of a word .
- [Attribute name | = "value"] (front pipe symbol |, or not a letter L), an attribute value equal to the value where the elements at the beginning or at value- will be selected. Do not enter a hyphen
- [Attribute name ^ = "value"] represents the value attribute value begins here (as a complete word, or part of a word) of the elements will be selected
- [Attribute name $ = "value"] represents the value of this attribute to the end value (as a complete word, or part of a word) of the elements will be selected
- [Attribute name * = "value"] indicates that the property value contains at least one element of value here will be selected, value need not be a complete word property values
Example:
1. Select all paragraphs p have the class attribute, which is set to red foreground color
P [class] { Color : Red }
<P class = "B1"> first paragraph </ P>
<P class = "B2"> second paragraph </ P>
<P> of the third paragraph </ p>
2. Select any lang attribute value is equal to EN (to be exact match) p elements, set the foreground color to red
P [lang = "EN"] { Color : Red }
<P lang = "EN"> first paragraph </ p>
<P> the second paragraph </ p>
<P> of the third paragraph </ p >
3, - = test word matching section, i.e., a plurality of matching words with a space adjacent to one (full word). Selecting the class attribute in the attribute value has boxone article element, and set the background color to yellow.
article[class~="boxone"] {background-color:yellow}
<article class="boxone content">article</article>
<article class="boxoone">center</article>
(1) *=选择器可以匹配部分字符串（不需要完整的单词）
article[class*="box"] {background-color:yellow} √
(2) 当写成如下形式的时候，这个选择器将无法匹配，因为box不是空格分隔的单词列表中某个完整的单词。
article[class~="box"] {background-color:yellow} ×
4、|=选择任何带有lang属性且属性值是以es开头的h2，设置前景颜色为蓝色。
h2[lang|="es"] {color:blue}
<h2 lang="es">第一个二级标题</h2>
<h2 lang="zh">第二个二级标题</h2>
5、可以通过联合使用多种选择器，选择既有href属性，又有任意属性值包含单词box的class属性的a元素，设置背景颜色为橙色。
a[href][class~="box"] {background-color:orange}
<a href="http://www.baidu.com">百度</a>
<a href="#" class="box link">未链接</a>
<a href="http://www.baidu.com" id="box">其他进入方式</a>
6、*=选择器选择所有既有href属性，又有任意属性包含are（作为完整单词或单词的一部分，如hare、dare。无论are出现在属性值的什么位置）的title属性的a元素。
a[href][title*="are"] {font-size:30px}
<a href="#" title="百度are">百度</a>
<a href="#" title="sinlangsre">新浪</a>
<a href="#" title="wangyi">网易</a>
7、^=选择器匹配任何href属性以http://开头(作为完整的单词，或单词的一部分)的a元素。
a[href^="http://"] {background-color:red}
<a href="http://www.baidu.com">百度</a>
<a href="#">新浪</a>
8、匹配任何src属性完全等于logo.png的img元素。
img[src="wj1.png"] {border:1px solid green}
<img src="wj.png">
9、选择器的精确度比前一个低，匹配任何src属性值以。png结尾的img元素。
img[src$=".png"] {border:1px solid green}
<img src="wj.png">
<img src="1.jpg">