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"]{}
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样式的效果}
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{}
链接的样式一般有四种如下
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-