CSS样式及选择器
1.CSS样式概述
CSS：Cascading Style Sheets，层叠样式表
特点：
- 以统一的方式完成一样的页面效果
- 实现页面内容（html）与样式（css）相分离
- 提高代码的可重用性和可维护性
CSS3是CSS的规范的最新版本，在CSS2.1的基础上增加了许多新功能，如圆角、多背景、阴影等。
CSS样式的定义格式：由选择器及一条或多条声明构成。
selector {declaration1; declaration2; ... declarationN }
选择器selector：需要改变样式的HTML元素
声明declaration：由一个属性和一个值组成。
书写CSS样式时，除遵循CSS样式定义规则外，还应注意以下特点：
- CSS样式中的选择器严格区分大小写，属性和值不区分大小写，一般习惯将选择器、属性和值都采用小写的方式。
- 多个属性之间必须用英文分号隔开，最后一个属性后的分号可以省略，但为了便于增加新样式，最好保留。
- 若属性的值由多个单词组成，且中间包含空格，则必须为这个值加上英文引号。
- 采用/*…*/对CSS代码进行注释。
2. 选择器
- 选择器用于指定CSS样式作用的HTML元素。
- 使用CSS可对HTML页面中的元素实现一对一、一对多或多对一的控制。
2.1基本选择器
（1）通用选择器：（通配选择器）
目的：作用范围最广，为了匹配HTML网页文档中所有的元素。
语法：*{样式声明;}
特点：匹配页面所有的元素，效率低，尽量少使用。
*{
background-color:yellow;
margin:0; /*定义外边距*/
padding:0; /*定义内边距*/
}
（2）元素/标签选择器：
作用：指用HTML标签名作为选择器，为页面中某一类标签指定统一的CSS样式。
语法：标签名称{样式声明;}
特点：可快速为页面中同类型的标签统一样式，但不能设计差异化样式。
p{
color:red;
font-size:25px;
}
<body>
<p>段落1</p>
<h1>标题</h1>
<p>段落2</p>
</body>
（3）类选择器：
作用：允许被任何一个元素的class属性进行引用的选择器
语法：.类名{样式声明;}
注意：类名允许包含字母、数字、下划线和连字符-，不允许以数字开头
引用语法：<标签名称 class=“类名”></标记名称>
特点：可为元素对象定义单独或一样的样式。
.color{
color:red;
}
<body>
<p class=“color”>段落</p>
<h1 class=“color”>标题</h1>
</body>
（4）id选择器：
作用：为标有特定 id 的 HTML 元素指定特定的样式
语法：#id值{样式声明;}
id属性设置：<标签名称 id=“id值”></标记名称>
#footer{
color:red;
font-size:20px;
background-color:#aaaaaa;
width:300px;
height:300px;
}
<body>
<div id=“footer”>段落</div>
<div id=“top”>段落</div>
</body>
2.2 群组选择器
作用：将多个选择器放在一起，统一声明样式
语法：选择器1,选择器2,…,选择器n{样式声明;}
#footer , p , div , .color{
color:red;
}
#footer{ color:red; }
p{ color:red; }
div{ color:red; }
.color{ color:red; }
2.3 层次选择器
作用：通过HTML元素间的层次关系获取元素，并为其定义样式
| 选择器 | 类型 | 描述 |
|---|---|---|
| E F | 后代选择器 | 选择E元素的所有后代F元素 |
| E > F | 子代选择器 | 选择E元素下所有的子元素F |
| E + F | 相邻兄弟选择器 | 选择紧接在E元素后的F元素 |
| E ~ F | 通用兄弟选择器 | 选择E元素后边的所有兄弟F元素 |
（1）后代选择器：
当元素发生嵌套时，内层元素就成为外层元素的后代。
格式：外层元素 内层元素{样式声明;}
作用：选择外层元素的所有后代内层元素。
#footer p{ color:red; }
<div id=“footer”>
<h1>标题1</h1>
<p>段落1</p>
<div>
<p>段落2</p>
</div>
<h1>标题2</h1>
<p>段落3</p>
</div>
（2）子代选择器：
格式：外层元素 >内层元素{样式声明;}
作用：选择外层元素的所有直接后代元素（间接元素不适用）。
#footer>p{ color:red; }
<div id=“footer”>
<h1>标题1</h1>
<p>段落1</p>
<div>
<p>段落2</p>
</div>
<h1>标题2</h1>
<p>段落3</p>
</div>
（3）相邻兄弟选择器：
格式：元素E +元素F{样式声明;}
作用：选择紧接在E元素后的F元素
h1+p{
color: red;
background: #CCCCCC;
}
<div id=“footer”>
<h1>标题1</h1>
<p>段落1</p>
<p>段落2</p>
<h1>标题2</h1>
<p>段落3</p>
</div>
（4）通用兄弟选择器：
格式：元素E ~元素F{样式声明;}
作用：选择E元素后边的所有兄弟元素F
h1~p{
color: red;
background: #CCCCCC;
}
<div id=“footer”>
<h1>标题1</h1>
<p>段落1</p>
<p>段落2</p>
<h1>标题2</h1>
<p>段落3</p>
</div>
2.4 伪类选择器
伪类：同一个元素，根据其不同的状态，有不同的样式。
作用：匹配元素不同状态
语法：
E: pseudo-class {property:value}
E：HTML元素
pseudo-class：伪类选择器名称
property：属性名称
value：属性值
“伪”的含义：它不像类样式那样，需要使用class属性。
| 选择器 | ||
|---|---|---|
| E:link | 链接伪类选择器 | 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接锚点上 |
| E:visited | 链接伪类选择器 | 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上 |
| E:active | 用户行为伪类选择器 | 选择匹配的E元素，且匹配元素被激活。常用于锚点与按钮上 |
| E:hover | 用户行为伪类选择器 | 选择匹配的E元素，且用户鼠标在停留在元素E上。 |
| E:focus | 用户行为伪类选择器 | 选择匹配的E元素，且匹配的元素获得焦点 |
超链接的4种状态，需要有特定的书写顺序才能生效。
a:link {}
a:visited {}
a:hover {}
a:active {}
可靠的顺序可用喜爱(love)和讨厌(hate)两个词来概括：
l(link)ov(visited)e h(hover)a(active)te
a:link{
color: #0f0;
}
a:visited{
color: #0000ff;
}
a:hover{
color: #CCCCCC;
}
a:active{
color: #f00;
}
<body>
<a href="http://www.baidu.com" target="_blank">Web前端技术</a>
</body>
结构伪类是CSS3新设计的选择器，利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和id属性的定义，使得文档更加简洁。
E:nth-child(n)：
作用：选择所有在其父元素中第n个位置的匹配E的子元素。
n可以是数字、关键词或公式。
tr:nth-child(odd) /*用于匹配下标是奇数的子元素的关键词*/
{
background-color:#ff0000;
}
tr:nth-child(even) /*用于匹配下标是偶数的子元素的关键词*/
{
background-color:#0000ff;
}
p:nth-child(2n+1) /*使用公式（an+b)，表明周期的长度，n为计数器（从0开始），b是偏移量*/
{
background:#ff0000;
}
E:nth-of-type(n)：
作用：选择所有在其父元素中同类型第n个位置的匹配E的子元素。
N可以是数字、关键词或公式。
2.5 属性选择器
在HTML中，通过各种各样的属性可以给元素增加许多附加的信息。CSS3在CSS2的基础上扩展了这些属性选择器，支持基于模式匹配来定位元素。
| 选择器 | 描述 |
|---|---|
| E[attr] | 选择匹配具有属性attr的E元素。其中E可以省略，表明选择定义了attr属性的任意类型元素 |
| E[attr=val] | 选择匹配具有属性attr的E元素，并且attr的属性值为val（其中val区分大小写），同样E元素省略时表明选择定义了attr属性值为val的任意类型元素 |
| E[attr｜=val] | 选择匹配E元素，且E元素定义了属性attr，attr属性值是一个具有val或者以val-开始的属性值。常用于lang属性（例如lang=“en-us”）。例如p[lang=en]将匹配定义为英语的任何段落，无论是英式英语还是美式英语 |
| E[attr~=val] | 选择匹配E元素，且E元素定义了属性attr，attr属性值具有多个空格分割的值，其中一个值等于val。例如，.info[title~=more]将匹配元素具有类名info，而且这个元素设置了一个属性title，同时title属性值包含了”more”的任何元素。如<a class=“info” title=“click here for more information”>click</a> |
| 通配符 | 类型 | 示例 |
|---|---|---|
| ^ | 匹配起始符 | span[class^=span]表明选择以类名“span”开头的所有span元素 |
| $ | 匹配终止符 | a[href$=pdf]表明选择以“pdf”结尾的所有href属性的所有a元素 |
| * | 匹配任意符 | a[title*=site]匹配a元素，而且a元素的title属性值中任意位置有“site”字符的任何字符串 |
2.6 选择器优先级
①在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
②作为style属性写在元素标签上的内联样式
③id选择器
④类选择器/伪类选择器/属性选择器
⑤标签选择器
⑥通配符选择器
⑦浏览器默认属性或继承的属性
语法： 属性：值!important;
作用：提升指定样式规则的应用优先权。
| 选择器类型 | 权值 |
|---|---|
| 通配符选择器 | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器 | 0,0,1,0 |
| 属性选择器 | 0,0,1,0 |
| 伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 内联样式 | 1,0,0,0 |
例：
<!doctype html>
<html lang="zh-cn">
<head>
<title>选择器优先级</title>
<meta charset="utf-8">
<style>
#d1 #s1 {
color: red;
}
#d1 p span {
color: orange;
}
.p1 span {
color: yellow;
}
#s1 {
color: pink;
}
#d1 .p1 span {
color: blue;
}
#d1 #p1 #s1 {
color: green;
}
</style>
</head>
<body>
<div id="d1">
<p id="p1" class="p1">
<span id="s1">这是一个span</span>
</p>
</div>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
