学习笔记之CSS-选择器、特性

1. CSS选择器

CSS语言有两个基本功能：匹配和渲染。

1.1 标签选择器

也称为元素选择器或类型选择器，它是以文档中对象类型的元素作为选择器。如：p、div、span等。

优点：为页面中同类型的标签重置样式，实现页面显示效果的统一。

缺点：不能够为标签设计差异化样式，不同页面区域之间会相互干扰。

注意：div、span等通用元素，不建议使用标签选择器，因为它们的应用范围广泛，使用标签选择器会相互干扰。

如：

h1{font-weight:bold}

 

1.2 ID选择器

是以元素的id属性作为选择器，使用“#”前缀标识符标识，后面紧跟指定元素的ID名称。

注意：ID名是唯一的，只能对应文档中一个具体的对象。

如：

<div id="test">test</div>

#test{color:red;}

 

1.3 类选择器

以对象的class属性作为选择器，使用“.”（英文符号点）进行标识，后面紧跟类名。

如：

<div class="red">red</div>

.red{color:red;}

 

1.4 指定选择器

是为ID选择器或类选择器指定目标标签的一种特殊选择器形式。

注意：指定选择器主要用于限制类选择器或ID选择器的应用范围，缩小样式影响的目标。

如：

<div id="top">
   <h1 class="red">red</h1>
</div>

span.red{
   color:Red;
}
div#top{
   width:100%;
}

 

1.5 包含选择器

包含选择器是复合选择器，由前后两个选符组成，它选择被第一个选择符包含的第二个选择符匹配的所有后代元素对象。

如：<div><p><span></span></p></div>结构中，div span包含选择器可以定义span元素的样式。

包含选择器中前后两部分之间以空格隔开，前后两部分选择符在结构上属于包含关系。

如：

.div1 h2{/*定义类div1中的标题样式*/
    font-size:18px;
}
.div1 p{/*定义类div1中的段落样式*/
    font-size:12px;
}
.div1 h2 p span{/*多层包含选择器*/
    color:Red;
}

 

1.6 子选择器

子选择器是复合选择器，由前后两个选符组成，它选择被第一个选择符包含的第二个选择符匹配的所有子对象。

如：<div><p><span></span></p></div>结构中，div>p子选择器可以定义p元素的样式，但不能使用div>span子选择器定义span元素的样式。

子选择器中前后部分之间用一个大于号隔开，前后两部分选择符在结构上属于父子关系。

如：

#main > table{/*定义id为main的主体模块中子对象table的样式*/
   width:778px;
   font-size:12px;
}
#main >.title{/*定义id为main的主体模块中子对象的class为title的样式*/
   color:red;
   font-style:italic;
}

 

1.7 相邻选择器

是复合选择器，由前后两个选择符组成，它选择与第一个选择符相邻的第二个选择符匹配的所有同级对象。

如：<div><p><span></span></p></div>结构中，div+p相邻选择器可以定义最后一个p元素的样式，但不会影响其内部的p元素对象。

相邻选择器中前后部分之间用一个加号（+）隔开，前后两部分选择符在结构上属于同级关系，且拥有共同的父级元素。

如：

<div id="wap">
   <div id="sub_wap">
       <h2 class="news"></h2>
       <p class="news"></p>
       <span class="news"></span>
    </div>
    <p></p>
</div>

#sub_wap + p {
   font-size:14px;
}

 

1.8 兄弟选择器

是复合选择器，由前后两个选择符组成，它选择与第一个选择符相邻的第二个选择符匹配的所有同级对象。

如：<div><p><span></span></p></div>结构中，div~p兄弟选择器可以定义最后div后面两个p元素的样式。

兄弟选择器中前后部分之间用一个波浪符号（~）隔开，前后两部分选择符在结构上属于同级关系，且拥有共同的父元素。

如：

<div class="header">
    <h2>情况一：<h2>
    <p>p标签</p>
    <h3>p标签</p>
    <h2>情况二：</h2>
    <div>隔开段落和h3</div>
    <p>p标签</p>
    <h3>相邻选择器</h3>
    <h2>情况三：</h2>
    <h3>相邻选择器</h3>
    <p>p标签</p>
    <div>
       <h2>情况四：</h2>
       <p>p标签</p>
       <h3>相邻选择器</h3>
    </div>
</div>

p ~ h3 {
   background-color:#0099FF;
}

 

1.9 分组选择器

是复合选择器，但它不是一种选择器类型，而是一种选择器的特殊用法。

选择器分组，使用逗号把同组内不同对象分隔。

分组选择器与类选择器在性质上有点类似，都可以为不同元素或对象定义相同的样式。

如：

.class1{
   font-size:13px;
   color:Red;
   text-decoration:underline;
}
.class2{
   font-size:13px;
   color:Blue;
   text-decoration:underline;
}  

上面代码可以改成：

.class1,.class2{
   font-size:13px;
   text-decoration:underline;
}
.class1{

   color:Red;
}
.class2{
   color:Blue;
}  

 

1.10 伪选择器

伪选择器包括伪类和伪对象两种选择器，以冒号（:）作为前缀，冒号后紧跟伪类或者伪对象名称，冒号前后没有空格，否则将解析为包含选择器。

注意：伪选择器主要用来选择特殊区域或特殊状态下的元素或者对象，这些特殊的区域或特殊状态无法通过标签选择器、ID选择器或者类选择器等进行精确控制。

如：

a {text-decoration:none;}/*相同的样式都放在这里*/
a:link { color:#FF0000;} /*第一位置，定义超链接的默认样式*/
a:visited { color:#0000FF;} /*第2位置，定义访问过的样式*/
a:hover {color:#00FF00;} /*第3位置，定义经过的样式*/
a:active { color:#CC00CC;} /*第4位置，定义鼠标按下的样式*/

 

1.11 属性选择器

以对象的属性作为选择器。

如：在<div><p id="first"><span></span></p></div><p></p>结构中，p[id]属性选择器可以定义第一个p元素的样式，但不会影响最后一个p元素对象。

属性选择器使用中括号进行标识，中括号内包含属性名、属性值或者属性表达式。

分为5种形式：

① 匹配属性名：通过匹配存在的属性来控制元素的样式，一般把要匹配的属性包含在中括号内，只列举属性名。

如：

[class] {color:red;} /*意思是作用于任何带class属性的元素，不管class的值是什么。*/

img [alt] {border:none;}/*意思是作用于任何带有alt属性的img元素。*/

 

② 匹配属性值：只有当属性完全匹配指定的属性值，才会应用样式。

如：

a[href="http://www.baidu.com/"] [title="css"] {font-size:12px;} 

作用于地址指向http://www.csss.cn/，且提示字符为“css”的a元素。

<a href="http://www.baidu.com/" title="css">百度一下</a>

或者可以综合使用多个条件：

div[id] [title="ok"] {
    color:blue;
    font-style:italic;
}

 

③ 前缀匹配：只要属性值的开始字符匹配指定字符串，即可对元素应用样式。前缀匹配选择器使用[^=]的形式来实现。

<div class="Mytest">前缀匹配</div>

[class^="My"] {color:red;}

只要class属性值开头字符为My的元素，都可以为它应用该样式。

 

④ 后缀匹配：与前缀匹配相反，只要属性值的结尾字符匹配指定字符串，即可对元素应用样式。后缀匹配选择器使用[$=]的形式来实现。

<div class="Mytest">后缀匹配</div>

[class$="test"] { color:red;}

只要元素的class属性值结尾字符为test，即可应用该样式。

 

⑤ 模糊匹配：只要属性值中存在指定字符串，就应用定义的样式，子字符串匹配选择器使用[*=]的形式来实现。

<div class="Mytest">模糊匹配</div>

[class *= "est"] { color:red;}

只要元素的class属性值中包含est字符串就可以应用该样式。

 

1.12 通用选择器

确定文档中的所有类型元素作为选择器，表示该样式适用于所有网页元素。

通用选择器由一个星号表示。

如：删除每个元素上默认的空白边界。

*{
   padding:0;
   margin:0;
}

 

2. CSS特性

2.1 层叠性

为了让用户有更多的控制能力，可以通过将任何声明指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。

层叠采用以下重要次序：

① 标为!important的用户样式。

② 标为!important的作者样式。

③ 作者样式。

④ 用户样式。

⑤ 浏览器/用户代理应用的样式。

 

2.2 继承性

可以让每个设计师不必为每个元素定义同样的样式。

注意：以下属性不具有继承性。

① 边框属性。

② 边界属性。

③ 补白属性。

④ 背景属性。

⑤ 定位属性。

⑥ 布局属性。

⑦ 元素宽高属性。