首页 > 开发 > CSS > 正文

css3选择器css3选择器

2016-05-18 19:09:59  来源:慕课网
  1:属性选择器,
a[class^=column]{} 火车头开始的class名column匹配
a[href$=doc] {} 火车尾结尾的href名字为doc
a[title=box]{} title中只要有box就匹配
2:根选择器 :root ==html
3:结构性选择器 input:not([type="submit"]){} 和jquery一样,除了submit,其它都可以。
4:empty 选择没有内容的元素,一个空格都没有。
div:empty {
border: 1px solid green;
}
5:target 用法类似锚点,显示与隐藏。
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
.menuSection{
display: none;
}
:target{/这里的:target就是指id="brand"的div对象*/
display:block;
}
6:nth-child(n) 里面的n是从1开始,但是(2n+1)表达式,n是从0开始的
7 :nth-last-child(n),和上面的一样,但是从最后开始的
8: nth-of-type(n)和上面的区别是定义一个具体的子元素
9 :last-of-type 选择最后一个,没有参数括号。
10 :nth-last-of-child(n)选择最后开始 。
11:only-child 父元素中只有唯一的那个子元素
12:only-of-type 子元素中唯一个