HTML5 CSS-1 CSS-2 CSS-3





选择器
class定义的元素:类可以用于任何元素

ID定义的元素:元素前面要加“#”

标签定义元素


复活内容,选择特定的样式如这:.ys2 h3





上面四种是css2

E[att]:选择具有att属性的E元素。是需要选择有某个属性的元素,如input[value][size][alt][可以加多个]{background:#F90}


E[att="val"]:选择具有att属性含有val的E元素,如input[value="1"]{}


E[att~="val"]:选择具有att属性中某个数值大小时的E元素,如input[style~="13px"]{}


E[att|="val"]:选择具有att属性中的val开头含有连接符号“-”分隔的字符串的E元素,如 input[cass|="a"]{}



下面是CSS3的关系选择器

ul li{表示选择父子:如ul-li};ul>li{表示选择父子孙ul-li和ul-li中的ol-li}


E+F——相邻选择符:选择紧贴在E元素之后F元素,如h2+h3{里面显示的就是h3样式效果}



兄弟选择器E~F:选择E元素所有兄弟元素F,如h2~P{里面显示的就是h2中所有p样式的效果}





下面是CSS3的伪元素选择器

E:first-letter——E::first-letter{}:表示设置元素内的第一个字符的样式


E:first-line——E::first-line{}:表示设置元素内的第一行的样式


E:before——E::before{content:url(图片位置)/content:"文字"——表示该元素前面加了“文字”这两个字}:表示E元素之前插入内容,用来和content属性一起使用,


E:after——E::after{content:url(图片位置)/content:"文字"——表示该元素后面加了“文字”这两个字}:表示E元素之后插入内容,用来和content属性一起使用,


E::selection——设置对象被选择时的颜色,如选择文字复制时的文字颜色


结构伪类选择器

E:first-child——E:first-child{}:表示父元素的第一个子元素E

E:last-child——E:last-child{}:表示父元素的最后一个子元素E

E:only-child——E:only-child{}:表示父元素仅有一个子元素E

E:nth-child(n){}——元素的第n个子元素,其中n可以用(odd)奇数或(even)偶数,还可以用公式3n;


E:nth-last-child(n){}——匹配父元素的倒数第n个子元素


E:only-of-type——E:only-of-type{}:只有一种类型的子元素,如上面中的div,p:only-of-type{}则就会是第一个div中的h1的样式(因为p是唯一)

E:first-of-type——E:first-of-type{}:匹配同类型中的第一个同级元素

E:last-of-type——E:last-of-type{}:匹配同类型中的最后一个同级元素

E:nth-of-type(n)——E:nth-of-type(n){}:匹配同类型中的第n个同级兄弟元素

E:nth-last-of-type(n)——E:nth-last-of-type(n){}:匹配同类型中的倒数第n个同级兄弟元素


:root——选择文档的根元素:指HTML5本身的文档,如直接是:root{}这个

E:empty——匹配没有任何子元素(包括text节点)的元素,如E:empty{}



UI伪类及其他选择器

链接的样式一般有四种如下

E:active{}——表示向被激活的元素添加样式

E:hover{}——表示当鼠标悬浮在元素上方时,向元素添加样式

E:link{}——表示向未被访问的链接添加样式

E:visited{}——表示向已被访问的链接添加样式



E:focus{}——表示向拥有键盘输入焦点的元素添加样式

E:lang(lang设置的名称){}——表示向带有指定lang属性元素添加样式

input:checked{}——表示选择每个被选中的input元素添加样式

input:disabled{}——表示选择每个禁用的input元素添加样式

input:enabled{}——表示选择每个启动的input元素添加样式

#E:target{}——表示选择当前活动的锚点元素添加样式

:not(反选之外的元素){}——表示选择E元素之外的每个元素添加样式,具有反选作用



选择器的优先级问题

原则上:元素选择器<类选择器

谁指向精确谁的优先级高

并列的话谁在后边谁优先级高



CSS3前缀

目前主流 的游览器内核有

webkit内核:代表为chrome和safari,前缀为-webkit-

trident内核:代表IE游览器,前缀为-ms-

gecko内核:代表Firefox,前缀为-moz-

presto内核:代表Opera,前缀为-o-

手机等移动端一般是iOS和安卓系统,基本采用webkit引擎,前缀为-webkit-