如果你对css不了解或者只是了解一点,那么css选择器是你必须要知道的,只有了解css规则,你才能都懂css代码!
下面介绍css选择器:
CSS 选择器
简单选择器
1)id 选择器
方法:通过给标签加id 属性,并给与该属性一个值(这个值我们可以称为id 名称)
#id 名称{
属性:值;
}id 属性的值是我们自己定义的,定义值得过程我们可以称作给id 命名!
命名需要遵循一定规则(我建议你用以下写法):
(1)只采用字符[a-zA-Z0-9],连字号(-)和下划线(_),区分大小写(2)以字母开头,避免纯数字,避免数字开头,以保证兼容,以数字开始的类名、id 名仅在IE6/IE7/IE8 下被识别,而其它浏览器下则不识别(忽略该规则)。
(3)一个id 名只能在一个页面中出现一次,不可以两个标签拥有同样的id 名。
2)类(class)选择器
方法:给标签加class 属性并给与该属性一个值(这个值我们可以称为类名)
.类名{
属性:值;
}
class 属性的值是我们自己定义的,定义值得过程我们可以称作给类(class)命名!命名需要遵循一定规则(我建议你用以下写法):
(1)只采用字符[a-zA-Z0-9],连字号(-)和下划线(_),区分大小写
(2)以字母开头,避免纯数字,避免数字开头,以保证兼容,以数字开始的类名、id 名仅在IE6/IE7/IE8 下被识别,而其它浏览器下则不识别(忽略该规则)。
(3)类名的好处是可以多次使用方便给标签归类!
(4)一个标签可以拥有多个类名
总结:id 名与类名的命名最好具有语义!
3)标签选择器
直接将html 标签名作为选择器
div {
}
p {
}
复杂选择器
1)交集选择器
一个标签选择器后边跟一个类选择器或者一个ID 选择器,中间不能有空格。它要求必须是属于某一个标签的,并且声明了类选择器或者ID 选择器。
例如:
div.mycolor{…} 类别为mycolor 的层才会被选中,应用该样式。
div#mydiv{…} id 为mydiv 的层才会被选中,应用该样式。
2)并集选择器
就是多个选择器以逗号相连,只要满足其中之一它都会被选中!
上面学的选择器都可以被写入并集选择器
div,p,h1,div.mycolor,div#mydiv {…}
3)后代选择器(包含选择器)
是以空格相连的的多个选择器,外层的选择器写在内层的选择器前面!根据元素的后代关系来作为选择的筛选条件!
div h1.first span.firstletter {…}
伪类选择器
a:hover {
color:red;
}
通配符选择器
它是一种特殊的选择器,它用*符号表示,它可以定义文档中所有元素对象的样式!
* {}
为了代码的规范性,不建议用这种选择器!