The three selectors in css3

Selector:

CSS3 flexible method to find many new elements, which greatly improves the efficiency and accuracy of the elements to find. Compatible with most of the CSS3 selectors in jQuery selector provided
1. A selector attributes:
a) E [attribute] can be represented by the presence attribute attr;

div[class]

b) E [attr = val] an attribute value exactly equal Val;

div[class=mydemo]

c) E [attr * = val] attribute values represented by the characters and contains val "arbitrary" position;

div[class*=mydemo]

d) E [attr ^ = val] represents the value of the attribute character and contains val "start" position;

div[class^=mydemo]

e) E [attr $ = val] represented by the attribute value val contains characters and "end" position;

div[class$=demos]
Two pseudo class selector - pseudo-element selectors:

a) prior to the study: a: hover a: link a: active a: visited

b) an element to element relative to its parent or sibling class to acquire the pseudo-free pigment structure

f) E: first-child: Find E first child element of the parent element of this element E

g) E: last-child: the last child element

h) E: nth-child (n): the n-th element is calculated all siblings element E

i) E: nth-last-child (n): with E: nth-child (n) is similar, except backwards calculated

j) E: nth-child (even): all the even

k) E: nth-child (odd): all the odd

l) E: nth-of-type (n): Specifies the type

m) E: empty without any child node of the selected elements E, note that spaces operator element

n) E: target for use in conjunction with an anchor, the anchor in the current element will be selected
- o) highlights: n follows a linear change its value 0,1,2,3,4, ... but when n <= 0, the selected invalid
p) Case Code:

/ * First li element * /
li: First-Child {
    Color: Red;
}
/ * last element * /
li: Last Child {-
    Color: Green;
}
/ * Get the first 10 elements * /
li: Nth -child (10) {
    Color: Orange;
}
/ * Get the penultimate 3 li element * /
li: Nth-Last-Child (. 3) {
    Color: Purple;
}
/ * Get the index order of a multiple of six li element * /
li: Nth-Child (6N) {
    text-Decoration: underline;
    border: 1px Solid Red;
}
/ * Get all indexes li element even number * /
li: Nth-Child (the even) {
    border: 1px Solid Black ;
}
/ * Get the first five li element * /
li: Child-Nth (-n +. 5) {
    background-Color: #ddd;
}
/*获取除了第一个外的元素*/
li:nth-child(n+2){

}

c) n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等
三伪元素选择器：

a) 重点：E::before、E::after

i. 是一个行内元素，需要转换成块:display:block float:** position:

ii. 必须添加content,哪怕不设置内容，也需要content:””

iii. E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理

iv. E::before: 定义在一个元素的内容之前插入content属性定义的内容与样式

v. E::after: 定义在一个元素的内容之后插入content属性定义的内容与样式

vi. 注意：

IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素
CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类

b) E::first-letter文本的第一个字母或字(不是词组)

c) E::first-line 文本第一行

d) E::selection 可改变选中文本的样式

转载于:https://www.cnblogs.com/qdxbls/p/11057759.html

The three selectors in css3

Guess you like