<!-- 基本选择器
1、标签选择器:p{font-size: 12px;}
2、类选择器:.font18px { font-size: 18px; }
3、ID选择器:#box{padding:100px;}
4、通配选择器:* {margin: 0;} -->
<!-- 组合选择器
1、包含选择器:#header p { font-size:14px;}
2、子选择器:div > span { font-size:16px;}
3、相邻选择器:p+h3 { background-color: #0099FF; /* 设置背景色 */ }
4、兄弟选择器:p ~ h3 { background-color: #0099FF; /* 设置背景色 */ }
5、分组选择器:h1, h2, h3, h4, h5, h5, h6 {background-color: #99CC33; /* 设置背景色 */} -->
<!--属性选择器
1、a[id] {background: blue; color:yellow;font-weight:bold;}、a[href][title] {background: yellow; color:green;}
2、a[id="first"] {background: blue; color:yellow;font-weight:bold;}、a[href="#1"][title] {background: yellow; color:green;}
3、a[title~="website"]{background:orange;color:green;}
4、a[title^="http://"]{background:orange;color:green;}
5、a[title$="com"]{background:orange;color:green;}
6、a[title*="site"]{background:black;color:white;}
7、a[lang|="zh"]{background:gray;color:yellow;} -->
<!--伪类选择器
1、动态伪类
a、锚点伪类 如:link、:visited
b、行为伪类 如:hoverhover、:active、:focus
.demo a:link{color:gray}/*链接没有被访问时前景色为灰色*/
.demo a:visited{color:yellow}/*链接被访问过后前景色为黄色*/
.demo a:hover{color:green}/*鼠标悬浮在链接上是时前景色为绿色*/
.demo a:active{color:blue}/*鼠标击中激活链接那一下时前景色为蓝色*/
2、结构伪类
a、first-child:选择某个元素的第一个子元素 #wrap li:first-child{background-position:2px 10px;}
b、last-child:选择某个元素的最后一个子元素 #wrap li:last-child{background-position:2px -277px;}
c、nth-child:选择某个元素的一个或多个特定的子元素 #wrap li:nth-child(2){background-position:2px -31px;}、#wrap li:nth-child(3n+1){background-color:#efefef;}
d、nth-last-child:与nth-child一致,区别是倒着数;nth-last-child(1)与last-child指向同一个;
...
3、否定伪类 tbody th:not(.end) {background: url(images/dots.gif) 15px 56% no-repeat;padding-left: 26px;}
4、状态伪类:
a、:enabled
b、:disabled
c、:checked
5、目标伪类 -->
简单介绍-CSS3选择器
于 2020-01-13 21:16:11 首次发布