微信号:imooc-com

介绍:慕课网是一个超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!

猿记 | CSS选择器挑花眼,如何真正为我所用?

2018-10-18 08:50 慕课网

你这么优秀,一定只想把“慕课网”置顶

css选择器非常之多,常见的如class选择器,id选择器,标签选择器等等。每个的用法都有所区别,虽然很多都能到达同样的效果,但还是有一些更优的选择。

class、id、标签选择器

这个几个就不细说了,class和标签选择器主要用来设置样式上面,id选择器推荐不要用在css样式上,更多是用在js操作dom时,选择元素。
如:

div{
	background: #fff;}.list {
	color: red;}
$('#li').html('<span>web秀</span>')

element element

div p 选择 <div> 元素内部的所有 <p> 元素。

element>element

div>p 选择父元素为 <div> 元素的所有 <p> 元素。

element+element

div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。

[attribute]

[target] 选择带有 target 属性所有元素。

[attribute=value]

[target=_blank] 选择 target="_blank" 的所有元素。

[attribute~=value]

[title~=title] 选择 title 属性包含单词 “flower” 的所有元素。

[attribute|=value]/[attribute^=value]

[lang|=en] 选择 lang 属性值以 “en” 开头的所有元素。

[attribute$=value]

p[src$="e"] 选择其 src 属性以 “e” 结尾的所有 <p> 元素。

[attribute*=value]

p[title*="abc"] 选择其 title 属性中包含 “abc” 子串的每个 <p> 元素。

element1~element2

p~div 选择前面有 <p> 元素的每个 <div> 元素。

A标签伪类选择器

:link a:link 所有未被访问的链接(a标签的默认样式)。

:visited a:visited 所有已被访问的链接。

:active a:active 点击后没有松开鼠标的链接。

:hover a:hover 鼠标指针位于其上的链接。

:before / :after

在元素的内容之前插入内容。

div:before{
	content: '';
	display: block;
	background: red;
	width: 30px;
	height: 10px;}div:after{
	content: '';
	display: block;
	background: green;
	width: 30px;
	height: 10px;}

:first-child

p:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。(注意和:first-of-type做区分)

:first-of-type

p:first-of-type 匹配的是该类型的第一个,类型是指什么呢,就是冒号前面匹配到的东西,比如 p:first-of-type,就是指所有p元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是属于同一级的,也就是同辈的。(注意和:first-child做区分)

:last-child

p:last-child 表示其父元素的最后一个子元素,且这个元素是css指定的元素,才可以生效(注意和:last-of-type做区分)

:last-of-type

p:last-of-type 代表在一群兄弟元素中的最后一个指定类型的元素。(注意和:last-child做区分)

:only-child

p:only-child 选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素

:only-of-type

p:only-of-type 表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的

:nth-child(n)

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:nth-child(odd)或者:nth-child(2n+1) 奇数行、:nth-child(even)或者:nth-child(2n+2) 偶数行

:nth-last-child(n)

p::nth-last-child(n) 同上,从最后一个子元素开始计数。

:empty

p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。

:not(selector)

:not(p) 选择非 <p> 元素的每个元素。

input状态选择器

:focus 获得焦点的 input 元素

:enabled 每个启用的 input 元素

:disabled 每个禁用的 input 元素

:checked 每个被选中的 input 元素



  CSS资源筐

❶ HTML5与CSS3实现动态网页

 Web前端性能优化


 
慕课网 更多文章 前端技术层出不穷,敢问路在何方? 唐僧娶了女儿国国王,Python还能怎么办? 华为很好,但我不愿再回去 程序员最核心的竞争力是什么? 程序员为什么都选择不还清「技术债」?
猜您喜欢 在另一个地球上,原来都是这个酱紫 小程序「必将失败」?跟风前不妨冷静想一想 | 观点 Hadoop 2.0还存在哪些问题 TIOBE 6月编程语言排行榜:Kotlin 强势进入Top 50 iOS基础入门(四)- Objective-C语法总结