CSS选择器总结
2017-07-18 10:40
183 查看
CSS样式的描述包括两部分:即选择器和样式内容。
选择器:描述样式施加到哪些目标,或者说是根据某个依据来选择应用样式。
样式内容:以键值对形式描述样式的细节,比如字体大小、颜色、高度等等。
根据选择依据的不同,就产生了各种不同的选择器。
元素选择器:按照标签(元素)的名称来选择相应的目标。
代码示例: div{ background-color:#aaa; }
id选择器:根据元素的id名来选择,比如下面的例子就是选中“id=tt”的目标。
代码示例: #tt{ background-color:#Aaa; }类选择器:根据元素的class属性名来选择,比如下面的示例的选择器选中class=“tt”的目标。
代码示例: .tt{ background-color:#Aaa; }属性选择器:根据属性的特征来选择应用样式的目标,前面所讲的id选择器,class选择器,其实也属于属性选择器
这个示例选中type属性为text的表单元素 input[type="text"]{ height:35px; width:125px; }属性选择器的书写格式为:
[title]::选择设置了title属性的元素。
[title="tt"]: 选择title属性值为tt的元素。
[title^="tt"]: 选择了title属性值以tt开头的元素。
[title$="tt"]:选择title属性值以tt结尾的元素。
[title~="tt"]: 选择title属性值包含完整tt单词的元素。
[title*="tt"]: 选择title属性值包含tt的元素。
有可能以上书写格式会比较难记忆,但是不重要,也不需要记忆,用的多了,自然就记得住,记不起来的也可以百度一下就可以了
关系选择器:根据元素间的家族关系来选择目标。
A B:在选择器A中,选择所有B元素,B可以是元素选择器、id选择器、class选择器、属性选择器。注意:A包含B,A与B之间用空格隔开,否则会出错。
A,B:多个元素选择,同时匹配所有A,B元素,A与B之间用逗号间隔。
A>B:子元素选择器,匹配所有A元素的子元素B。
A+B:毗邻元素选择器,匹配紧随A元素之后的同级元素B,兄弟元素。
A~B:匹配A元素所有的同级元素,兄弟元素。
伪类、伪元素选择器:
伪元素:其效果与增加一个元素来实现的效果等价,故称之为伪元素。
伪类:其效果与增加一个类来实现的效果等价,故称之为伪类。
常见的伪元素、伪类选择器详情请参见本人博客:http://blog.csdn.net/zhuxiandan/article/details/75248524
(完)若内容有不当或出错之处,欢迎留言骚扰。