前几天终于在开源中国上看到一篇系统讲解css选择器的文章:http://my.oschina.net/u/1403186/blog/179641

匆匆扫完,才发现以前真是看书什么的太走马观花了,难怪有时候看老外的代码看的很吃力~这点上比较惭愧,一直是以项目或者目的为导向去学一个东西,这样学东西倒是很快,但是带来一个问题就是很多深入的知识完全没法了解,这方面平时杰仔做的很好,不过这货有时候太钻牛角尖了~

不废话,直接上代码,作为笔记:

/*x[attributes] 属性选择器 attributes selector*/
a[alt] {
	/*使用了该属性的就使用这个样式*/
	color: #f00;
}
a[alt="timepw"] {
	/*优先级比使用了统配的要高*/
	color: #F0F;
}
a[alt^="q"] {
	/*^ 表示只要属性值以双引号内的内容开头就满足选取要求,优先级比上一个高*/
	color: #0F6;
}
a[alt*="a"] {
	/** 表示只要属性值中包含双引号内的内容就满足选取要求*/
	color: #30C;
}
a[href$=".jpg"], a[href$=".png"], a[href$=".jpeg"], a[href$=".gif"] {
/*$表示适配以某个固定后缀结束的标签*/
}
img[src$=".jpg"] {
	width: 100px;
	height: auto;
}
img[alt="timepw"] {
	width: 200px;
	height: auto;
}
/*x:checked 伪类选择器*/
input[type=text]:checked {
	border: 1px solid #f00;
}
.nav {
	width: 120px;
	height: 30px;
	border: 1px solid #666;
	border-radius: 5px;
	margin: 5px;
}
.nav:checked {
	background: #333;
	color: #fff;
}
/*x:not(selector) IE9+*/
div:not(.nav) {
	border: 1px solid #f00;
}
/*nth-child IE9+*/
li {
	list-style: none;
	border-bottom: 1px solid #999;
	width: auto;
	height: 30px;
}
li:nth-child(2n) {
	border-bottom: 1px solid #06F;
	color: #06F;
}
li:nth-last-child(1) {
	/*倒数第一个*/
	border-bottom: 1px solid #0C6;
	color: #0c6;
}
li:first-child {
	/*第一个*/
	border-bottom: 1px solid #6F0;
	color: #6f0;
}
li:nth-child(4):first-letter {
	/*伪类选择器叠用*/
	color: #F00;
}
有个页面可以看,写的乱七八糟的,上面罗列的这些代码都应用在里面了,作为试验了。X+Y这种都没有试验出来,不知道为啥,有弄出来的麻烦告知,还有的觉得比较鸡肋的就没有写了,当前原文提到的前几个,是基础,写CSS的人都会,不提~我试验的代码地址:

http://timepw.com/design/css-selector/

 

发表评论·············

可以使用Ctrl+Enter快速发表哦!