css3:选择器

2019独角兽企业重金招聘Python工程师标准>>>

通配选择符(*) 通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用

相邻选择器（+）会选择相邻的下一个的元素（不包括自己）

兄弟选择器（~）会选择相邻的后面的所有兄弟元素（不包括自己）

属性选择器

E[att] { sRules }  选择具有att属性的E元素。E[att="val"] { sRules } 选择具有att属性且属性值等于val的E元素E[att~="val"] { sRules }选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。 E[att^="val"] { sRules } 选择具有att属性且属性值为以val开头的字符串的E元素;(包括)，如果有多个值，则写在开头的一个包括val则可以；

E[att$="val"] { sRules }  选择具有att属性且属性值为以val结尾的字符串的E元素。 (包括该字符串)，如果有多个属性值，则不可以！

E[att*="val"] { sRules }  选择具有att属性且属性值有val字母的字符串的E元素。如果属性有多个属性值，但属性值中包含有val的字符串，也可以。

E[att|="val"] { sRules }  选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；如果值仅为val，也将被选择。 这样理解会更简单：如果元素E拥有att属性，并且值为val，或者值是以val-开头的，那么E将会被选择。（如果属性有多个属性值，则不可以）

 伪类选择器

 E：link(未访问)

E：visited（已访问）

E：hover（鼠标移上去）,E：active（选定时）（它们之间有顺序）

E：focus获取焦点设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。 webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

E：not(选择器)匹配不含有s选择符的元素E。 

E:first-child { sRules }/写在子孩子（并且父元素是第一个孩子）,要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

E:last-child { sRules }/写在子孩子（并且父元素d是最后一个孩子）;匹配父元素的最后一个子元素E。 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素 E:last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。与之类似的伪类还有E:first-child，只不过情况正好相反，需要它是第一个子元素。

E：first-of-type/写在子孩子/子孩子中第一个出现该类型的元素匹配父元素下第一个类型为E的子元素。 

        首先，该选择符要匹配的是类型为E的子元素，这意味着E元素必须作为某个元素的子元素存在（E元素的父元素最高是html，也就是说E         元素本身最高只能是body，这表示任何非html的元素都符合这个约束，因为html元素是根元素。） 其次，该选择符要匹配的是父元素          第一个类型为E的子元素，这意味着被命中的元素不一定是父元素的第一个子元素（因为排在父元素首位的不一定是E元素，E元素可能           在子元素列表中的任何位置）。

E:last-of-type（匹配父元素下的所有E子元素中的倒数第一个）写在子孩子/子孩子中最后一个出现该类型的元素;首先，因为匹配的是父元素的子元素，这意味着E元素必须作为某个元素的子元素存在（E元素的父元素最高是html，也就是说E元素最高是body，这表示任何非html的元素都符合这个约束，因为html元素是根元素。） 其次，匹配的是父元素的第一个E子元素（要注意：被命中的不一定是父元素的第一个子元素，因为排在子元素首位的不一定是E元素，它可能在子元素列表中的任何位置）

E:only-child选择父元素只有一个元素的；要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

E：nth-child(表达式/even(偶数)/odd（奇数）/数字)（eg:隔行变色）/写在子元素/并且是该类型/并且是父元素的第n个孩子；E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E类型，则是无效选择符，但n会递增(初始值是0，还是1，看具体的情况)（li:nth-child(2n)偶数个（n的取值，看具体的问题）//用于找规律的题;百度题：有一堆数据，数据每三列显示，求第一列的左边的距离，第三列的右边的距离；）

E：nth-last-child;匹配父元素的倒数第n个子元素e，假设该子元素不是e，则选择符无效。 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素 ；该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1)

E:only-of-type匹配父元素的所有子元素中唯一的那个子元素E。 首先，因为匹配的是父元素的子元素，这意味着E元素必须作为某个元素的子元素存在（E元素的父元素最高是html，也就是说E元素最高是body，这表示任何非html的元素都符合这个约束，因为html元素是根元素）。 其次，父元素可以有多个子元素，但其中的子元素E必须是唯一的，不能出现多个。

E:nth-of-type(n)匹配父元素的第n个子元素E。 首先，因为匹配的是父元素的子元素，这意味着E元素必须作为某个元素的子元素存在（E元素的 父元素最高是html，也就是说E元素最高是body，这表示任何非html的元素都符合这个约束，因 为html元素是根元素。） 其次，匹配的是父元素的第n个为E的子元素（被命中的不一定是第n个子元素，因为匹配的不是第n个子元素，而是第n个为E的子元素）

E:nth-last-of-type(n)匹配父元素的倒数第n个子元素E。 首先，因为匹配的是父元素的子元素，这意味着E元素必须作为某个元素的子元素存在（E元素的父元素最高是html，也就是说E元素最高是body，这表示任何非html的元素都符合这个约束，因为html元素是根元素。） ；其次，匹配的是父元素的倒数第n个为E的子元素（被命中的不一定是倒数第n个子元素，因为匹配的不是倒数第n个子元素，而是倒数第n个为E的子元素）

E:empty    匹配没有任何子元素（包括text节点）的元素e。 

E:checked//匹配用户界面上处于选中状态的元素E，。(用于input type为radio与checkbox时)

E:enabled//匹配用户界面上处于可用状态的元素E。 

E:disabled 匹配用户界面上处于禁用状态的元素e

E:target// url后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素，:target选择器用于选取当前活动的目标元素。

伪对象选择器

E::first-letter/第一个字

    此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。 该伪类常被用来配合font-size属性和float属性制作首字下沉效果。 IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:first-line CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。即E:first-letter可转化为E::first-letter

E::first-line/E：first-line第一行元素

此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。 IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:first-letter ;CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。即E:first-line可转化为E::first-line

E::before设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性 

E::after设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性 

E::selection//选中的元素;设置对象被选择时的样式。 需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。

E::placeholder//表单中的提示信息;设置对象文字占位符的样式。 ::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。 当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。 需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder;Firefox支持该伪元素使用text-overflow属性来处理溢出问题。

 test:hover::after//点击test是显示after加的内容

转载于:https://my.oschina.net/u/4045971/blog/3017274