常用CSS选择器
在学习CSS选择器之前,首先要学习什么是CSS(Cascading Style Sheets)层叠样式表技术。CSS是一个出色技术,它使页面结构和样式进行完全分离,保证了HTML页面的简洁。利用CSS选择器可以轻松地改变某个元素的样式,并且不改动页面HTML结构,只需要该表对应的CSS样式表。
要使得某个样式加到对应的HTML元素上,首先应该找到这个元素。在CSS中,执行这种任务的表现规则叫做CSS选择器。学会使用CSS选择器是学习CSS的基础,它为获取目标元素后施加样式提供了极大的灵活性。下面看看有哪些CSS样式选择器。
一.
名称:标签选择器;
语法:E{ CSS规则 }
描述:以文档元素作为选择符
实例:input{ border:1px solid red;color:gray;margin:0;padding:0 }
二.
名称:ID选择器;
语法:#ID{ CSS规则 }
描述:以文档元素的唯一标识符作为选择符
实例:#footer{ border:1px solid red;color:gray;margin:0;padding:0 }
三.
名称:类选择器;
语法:E.className{ CSS规则 }
描述:以文档元素的class作为选择符
实例:E.style{ border:1px solid red;color:gray;margin:0;padding:0 }
四.
名称:群组选择器;
语法:E1,E2,E3{ CSS规则 }
描述:多个选择符应用同样的CSS样式规则
实例:E,F,G,N{ border:1px solid red;color:gray;margin:0;padding:0 }
五.
名称:后代选择器;
语法:E F{ CSS规则 }
描述:E元素的任意后代元素F执行对应的CSS样式规则
实例:E F{ border:1px solid red;color:gray;margin:0;padding:0 }
六.
名称:通配符选择器;
语法:*{ CSS规则 }
描述:以文档所有元素作为选择符
实例:*{ margin:0;padding:0 }
目前几乎所有的浏览器都支持上面的CSS选择器。此外,CSS选择器还有伪类选择器(E:hover{ ... }),
子选择器(E>F{ ... }),临近选择器(E+F{ ... }),属性选择器(E[attr]{ ... })。但是,主流的浏览器并不完全支持所有的CSS选择器。
想了解更多的CSS、HTML、JavaScript的知识,建议初学者在W3C(http://www.w3school.com.cn/)上进行学习。