CSS02——选择器
原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/taotaoyouarebaby/article/details/8764402
选择器种类:
标签选择器
范围:页面上的相应标签。
h1 { font-family: Arial, sans-serif; color : #1D1D1D; } |
类选择器
类名:\.[a-zA-Z]+[a-zA-Z_-]*
范围:由类名标记的元素。
.special{ font-family:”Courier New”; color : #FF0000; } |
对应的html
<p class=”special”> </p> |
ID选择器
用途:利于js操作网页元素,处理冗长网页。
特点:优先权大于类选择器,在页面内必须唯一。
#left-bar{ background: #1C1C1C; height: 300px; width:720px; } |
对应的html
<div id=”left-bar”></div> |
PS:ID还可以做为页面锚记。
//index.html
<a name=”first”>first</a> <a href=”other.html#level2”>next</a> <h2 id=”first”>同一页面内</h2> <!-- index.html内 --> <h2 id=”level2”>不同页面</h2> <!-- 在other.html内 --> |
群选择器
用途:将样式应用于多个元素。元素间用逗号分隔。
h1, .special, #left-bar{ color: #F1CD33; } |
通用选择器
用途:格式化不同网页元素,替代方法:继承。
范围:页面中所有标签。
*{ font-weight: bold; } #left-bar*{} /*选择ID为left-bar元素内的每一个标签*/ |
派生选择器
用途:设定所有满足相应层次关系的标签的样式。可以避免使用类选择器时需要的类名设置。
li a {/*设置li标签中的a标签的样式*/ font-family:Arial; color:blue; } p.special a{/*具有special类的p标签下的a标签*/ color:red; } .special a{ /*所有special类下的a标签*/ color:red; } |
伪类和伪元素
:link :visited :hover /* IE6中:hover仅对链接有效*/ :active :first-letter :first-line ---------以下IE6中不支持---------- :before :after :focus |
可以使用JS类库jQuery使IE6支持所有的CSS选择器。
高级选择器
子选择器
用途:与派生选择器类似,不过元素之间必须是直接相连。
文档结构:body ->h2 ->div->h2 body>h2{} div>h2{} |
如果使用派生选择器body h2{},则会影响两个h2。
邻接选择器
用途:设置相邻(非继承关系)元素。
文档结构
<h2></h2> <p></p> |
h2+p{} |
属性选择器
用途:定位具有特定属性和属性值的标签。
img[title] /* 选择任何具有title属性的img标签 */ input[type=”text”] /* 选择type属性值为text的input标签 */ a[href^=”http://”] /* 选择href属性值以http://开始的a标签 */ a[href$=”.pdf”] /* 选择href属性值以.pdf结尾的a标签*/ img[src*=headshot] /* 选择src属性值含有headshot字符串的img标签*/ |
注:IE6不8支持。