通配选择符(*) 通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用
相邻选择器(+)会选择相邻的下一个的元素(不包括自己)
兄弟选择器(~)会选择相邻的后面的所有兄弟元素(不包括自己)
属性选择器
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加的内容
来源:oschina
链接:https://my.oschina.net/u/4045971/blog/3017274