CSS02——选择器

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支持。