简单介绍-CSS3选择器

        <!-- 基本选择器
			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、目标伪类 -->

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zero-To-One

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值