CSS的元素选择器

	在css中选择可以分很多种,例如属性选择器 、ID选择器、包含选择器、选择器组合。
下面,我将一一展开介绍:
1、属性选择器
	在讲属性选择器前,我想先介绍一个特例:
	(1)、元素选择器。
		E{···}    /*  E为有效的hml元素名  */
	E可以是任意有效的元素名,甚至可以用“*”来代替元素名,不过当使用“*”时,
	所选元素为当前全部元素。
	代码如下:
	<style type="text/html">
		*{
		border:1px black solid;
		padding: 4px;
		}
	</style>
效果如下:

(2)、属性选择器
属性选择器正如其名称所述,能够根据标签的属性进行选择。
		大致可以分以下几种类型:
	E{ ···}:指定该CSS样式对所有元素有效。
	E[attr]{···}:该样式只对“attr”属性的元素有效。
	E[attr=value]{···}:该样式对含有“attr”属性,且“attr”的属性为value的元素有效。
	E[attr ^=value]{···}:该样式对含有“attr”属性,且“attr”的属性以value开头的字符串的E元素有效。
	E[attr $=value]{···}:该样式对含有“attr”属性,且“attr”的属性以value结尾的字符串的E元素有效。
	E[attr *=value]{···}:该样式对含有“attr”属性,且“attr”的属性且包含value的字符串的E元素有效。
代码如下:
<style type="text/css">
			div{
				background-color:#eee;
				width:"300px";
				height:"30px";
				border:"1px solid black";
				padding:10px;
			}
			p{
				background-color: #444;
				color:#fff;
				font:normal small-caps bold 20pt normal 宋体;
			}
			div[id]{
				background-color:#aaa;
			}
			div[id*=xx]{
				background-color:#999;
			}
			div[id^=xx]{
				background-color:#555;
				color:#fff;
			}
			div[id=xx]{
				background-color:#111;
				color:#fff;
			}
			
		</style>
	效果图如下:
2、ID选择器
	ID选择器可以对指定id属性值的元素起作用。
ID选择器语法如下:
#idValue {···}
可以直接定义id快速选择元素。
代码如下:
#xx{
border:2px dotted black;
background-color:#888;
}
同样id选择器也可以选择在某一标签下的id值。

例如:#xx{ border:2px dotted black; background-color:#888; }
像id选择器类似的选择器还有class选择器,就是将id标签替换成class标签。

3、包含选择器
包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。
语法格式如下:
Selector1 Selector2 {···}   /*  其中Selector1 Selector2都是有效的选择器*/
div .a {
	width:200px;
	hieght:35px;
	border:2px dotted black;
	background-color:#888;
}
对于上面的div .a选择器定义的CSS样式,应该对处于<div.../>元素之内且class属性为a的元素起作用。

对于包含选择器还有一个扩展那就是子选择器。
子选择器:
代码如下:

div>.a {
	width:200px;
	hieght:35px;
	border:2px dotted black;
	background-color:#888;
}

子选择器的功能与包含选择器相似,唯一不同的就是包含选择器所选择的是div级下的全部元素,而子选择器所选择的只是div下的子级中所满足的元素。

4、选择器组合
与其说它是一个选择器不如说它是之前几种选择器的组合,用法灵活。
div,.a,#abc{
width:20px;
hieght:35px;
bord:2px dotted black;
background-color;#888;
}

如上面的代码就是使用选择器组合定义了一个CSS样式,这个样式可以对div元素、class属性为a的元素、id为abc的元素都起作用。

熟练使用这几种选择器可以快速准确的进行css的样式设置。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值