CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)
一、通配符选择器(*)
*{
marigin: 0;
padding: 0;
}
二、元素选择器(E)
li {background-color: grey;color: orange;}
三、类选择器(.className)
四、id选择器(#ID)
#first {background: lime;color: #000;}
#last {background: #000;color: lime;}
五、后代选择器(E F)
.demo li {color: blue;}
六、子元素选择器(E>F)
ul > li {background: green;color: yellow;}
七、相邻兄弟元素选择器(E + F)
li + li {background: green;color: yellow; border: 1px solid #ccc;}
八、通用兄弟选择器(E ? F)
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
九、群组选择器(selector1,selector2,...,selectorN)
.first, .last {background: green;color: yellow; border: 1px solid #ccc;}
一、通配符选择器(*)
*{
marigin: 0;
padding: 0;
}
二、元素选择器(E)
li {background-color: grey;color: orange;}
三、类选择器(.className)
四、id选择器(#ID)
#first {background: lime;color: #000;}
#last {background: #000;color: lime;}
五、后代选择器(E F)
.demo li {color: blue;}
六、子元素选择器(E>F)
ul > li {background: green;color: yellow;}
七、相邻兄弟元素选择器(E + F)
li + li {background: green;color: yellow; border: 1px solid #ccc;}
八、通用兄弟选择器(E ? F)
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
九、群组选择器(selector1,selector2,...,selectorN)
.first, .last {background: green;color: yellow; border: 1px solid #ccc;}
CSS3的属性选择器主要包括以下几种:
- E[attr]:只使用属性名,但没有确定任何属性值;
- E[attr="value"]:指定属性名,并指定了该属性的属性值;
- E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“?”不能不写;
- E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
- E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
- E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
- E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);
-
.demo a[href][title] {background: yellow; color:green;}//存在href 和title 被选中
.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}//id="first"被选中
.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
input:not([type="submit"]) {border: 1px solid red;}
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。