css3: css3选择器 | 易学教程

--------------------css3选择器-------------------------
css3属性选择器 ~~属性选择器基本上ie7+都支持，可以相对放心的使用见: www.caniuse.com
[attr]
[attr=value]
[attr*=value] //css3
[attr^=value] //css3
[attr$=value] //css3
[attr~=value] ~~ [title~="foo2"] 匹配 <a title="foo1 foo2 foo3"> 可用[attr*=value]实现同等的选择效果
[attr|=value] ~~ [lang|="en-us"] 匹配 <body lang="en-us" > 可用[attr^=value]实现同等的选择效果

伪类选择器：结构伪类选择器和状态伪类选择器

> 结构性伪类选择器 (是否根元素，是否为空，是否不包含某元素，子元素选择器(第一最后 nth 奇偶倒数)
:root //根元素
:not() // #box :not(h1)
:empty
:target

~~~子元素选择器修饰限定作用
:first-child // ul#nav li:first-child 选择作为第一个子元素的li
:last-child // ul#nav li:last-child 选择作为最后一个子元素的li
:nth-child(n) // ul#nav li:nth-child(2){} 选择作为第二个子元素的li
:nth-last-child(n) // ul#nav li:nth-last-child(2) 选择作为倒数第2个子元素的li
:nth-child(odd) // ul#nav li:nth-child(odd) 选择序号为奇数的子元素且元素标签为li
:nth-child(even)

:nth-of-type(num/odd/even)
如 dl dt:nth-of-type(odd){} 表示在 dl下的dt中选择第奇数个的dt
:nth-last-of-type(n) // 选中的元素中倒数第几个

:nth-child(2n+1){}

:only-child // li:only-child

> 状态伪类选择器（悬停激活聚焦可用不可用只读可读写选中)
:hover
:active
:focus
:enable
:disable
:read-only
:read-write

用于单选框复选框的
:default //未选取状态
:checked //选取状态
:indeterminate //页面刚打开无指定的状态

::selection //元素处于选中状态时的样式

~ selector // div ~ p 兄弟选择器选择后面的同辈兄弟元素，结构伪类选择器

伪对象选择器
:after //指代元素结束标签前的位置
:before //指代元素开始标签后的位置

--------------------css3 样式属性 content -------------------------

content: string / url() / none / attr() / counter() /
p:after{content:"..."}
p:before{ content: "fe dev" }
p:after { content: none; }

p:after{ content: url('tuijian.png'); }
img:after { content: attr(alt); } //将图像alt属性的值作为content的值

content属性 couter-increment属性

h1{counter-increment:mycounter;} //为元素定义计数器名称
h1:before{ content: couter(mycounter) } //元素前置内容为计数器读取计数器mycounter的值

h2{counter-increment:myCounter;}
h2:before{content:"第"counter(myCounter)"章：";}

h2{counter-increment:myCounter;}
h2:before{color:#f00; content:"第"counter(myCounter)"章：";}

h2{counter-increment:myCounter;}
h2:before{color:#05a; content:counter(myCounter,upper-alpha)"章";}

h2{counter-increment:myCounter; counter-reset:sub;}
h2:before{color:#05a; content:counter(myCounter)"章";}
p{counter-increment:sub;}
p:before{margin-left:20px; content:counter(sub)"节";}

来源：https://www.cnblogs.com/stephenykk/p/3175469.html

标签

css3选择器

css