css3选择器css3选择器-原创手记-慕课网

css3选择器css3选择器

ZHANGXU__ 2016-05-05 13:59:28 浏览 2931

ZHANGXU__

关注TA

手记 4

粉丝 1

获赞 91

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 子元素中唯一个

相关标签: CSS3

1人推荐

发表评论

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 选择没有内容的元素，一个空格都没有。 5：target 用法类似锚点，显示与隐藏。 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 子元素中唯一个

HTML 全局属性： accesskey class contenteditable contextmenu 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 data-* 用于存储页面的自定义数据 dir draggable dropzone hidden id lang spellcheck style tabindex title 规定元素的额外信息（可在工具提示中显示） translate

01：属性选择器， a[class^=column]{} 火车头开始的class名column匹配 a[href$=doc] {} 火车尾结尾的href名字为doc a[title=box]{} title中只要有box就匹配 02：根选择器 :root ==html 03：结构性选择器 input:not([type="submit"]){} 和jquery一样，除了submit，其它都可以。 04：empty 选择没有内容的元素，一个空格都没有。 05：target 用法类似锚点，显示与隐藏。 06: nth-child(n) 里面的n是从1开始，但是（2n+1）表达式，n是从0开始的 07：nth-last-child(n),和上面的一样，但是从最后开始的 08: nth-of-type(n)和上面的区别是定义一个具体的子元素 09: last-of-type 选择最后一个，没有参数括号。 10 :nth-last-of-child(n)选择最后开始。 11:only-child 父元素中只有唯一的那个子元素 12：only-of-type 子元素中唯一个