内联样式之外,定义CSS样式的语法总遵守如下的格式:
/*select -选择器: 决定该样式定义对那些元素起作用*/
selector{
/*property:value -属性定义:决定了这元素起什么样的作用 (字体,颜色,布局等)*/
property1:value1;
property2:value2;
}
最简单的选择器
元素选择器是最简单的选择器,其语法格式如下:
E { ....} /*其中E代表有效的HTML元素名*/
/*具体可分为如下几种*/
E {} 指定该样式对那些标签起作用
E[attr]{} 指定该样式对具有某一属性的标签起作用
E[attr=value]{} 指定该样式对具有某一属性且其值为value的标签起作用
E[attr~=value]{} 指定该样式对具有某一属性且其职能股为空格隔开的系列中,其中某个值为value的标签起作用
E[attr |= value]{} 指定该样式对具有某一属性且其职能股为空格隔开的系列中,其中第一个值为value的标签起作用
E[attr ^=value]{} 指定该样式对具有某一属性,且其值是以value开头的标签起作用
E[att$="value "]{} 指定该样式对具有某一属性,且其值是以value结尾的标签起作用
E[att*="value"] {} 指定该样式对具有某一属性,且其值包含value的标签起作用.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS属性选择器</title>
<style type="text/css">
div{
width: 300px;
height: 30px;
background-color: #eee;
border:1px solid black;
padding: 10px;
}
/*对所有ID属性的div*/
div[id]{
background-color: #aaa;
}
/*对id属性包含xx的div*/
div[id*=xx]{
background-color: #999;
}
/*对id属性以xx开头的div*/
div[id^=xx]{
background-color: #555;
color: #fff;
}
/*对id属性等于xx的div*/
div[id=xx]{
background-color: #111;
color:#fff;
}
</style>
</head>
<body>
<div>没有任何属性的div</div>
<div id='a'> 带有ID属性的div</div>
<div id="zzxx"> id属性中包含xx</div>
<div id="xxyy"> id属性以xx开头的div</div>
<div id='xx'>id属性值等于xx的div</div>
</body>
</html>
ID选择器
ID选择器指定CSS样式将会对具有指定ID属性的标签起作用.ID选择器的语法格式如下: 指定该css样式选择器对id为idvalue的标签起作用,各个浏览器对ID选择器的支持都很好.仅对指定元素起作用的ID选择器
#idValue{}
E#idvalue {}
/*只对P标签起作用的css样式*/
p#xx{
border:3px dotted black;
background-color:#888;
}
/*实例*/
div{
background-color: #ddd;
width: 300px;
height: 30px;
padding: 3px;
}
#xx{
border: 3px dotted black;
background-color: #888;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>ID选择器</title>
<link rel="stylesheet" type="text/css" href="4.css">
</head>
<body>
<div>没有任何属性的div</div>
<div id="xx">有id属性且其值为xx的div</div>
</body>
</html>
class选择器
class选择器指定css样式对具有指定class属性的元素起作用,class选择器的语法格式为:
[E].classValue {} /*其中E是有效的HTML标签*/
.myclass{
width: 200px;
height: 30px;
background-color: #ddd;
padding: 3px;
}
p.myclass{
border: 3px dotted black;
background-color: #333366;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="5.css">
<title>class选择器</title>
</head>
<body>
<div class="myclass">class为myclass的div</div>
<p class="myclass">class为myclass的p</p>
</body>
</html>
包含选择器
包选择器用于指定目标选择器必须处于某个选择器对应的元素内部.其语法格式为:
selector1 selector2 { } /*selector1,selector2 都是有效的选择器*/
/*实例*/
div{
width: 300px;
height: 40px;
background-color: #ddd;
margin: 5px;
}
div .a{
width: 280px;
height: 20px;
background-color: #888;
border: 2px dotted black;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="6.css">
<title>包含选择器</title>
</head>
<body>
<div>没有任何属性的div</div>
<div><section><div class='a'> 处于div内,且有属性class为a的div</div></section></div>
<p class='a'> 没有处于div内,但class为a的元素</p>
</body>
</html>
子选择器
子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素.其语法格式为:: 包含选择器与子选择器有点类似.它们之间的区别在于:对于包含选择器,只要目标选择器位于外部选择器对应的元素内部,即使是 孙子元素都可以.
SELECTOR1>SELECTOR2 {....} /* 其中selector1 和 selector2 都是有效的选择器*/
selector ~ selector2 {....}
div{
width: 400px;
height: 50px;
background-color: #ddd;
margin: 5px;
}
#linux ~ .long{
color:red;
font-size: 30px;
}
<!DOCTYPE thml>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="8.css">
<title>兄弟选择器</title>
</head>
<body>
<div>疯狂程序员</div>
<div class='long'> 疯狂码农</div>
<div id='linux'>疯狂linux社区</div>
<div class='long'>疯狂PHP</div>
<div class='long'>疯狂ASM</div>
</body>
</html>
组合选择器
组合选择器.有时想让一个css样式对多个选择器起作用,那么就可以利用选择组合器来实现 伪元素选择器 伪元素选择器并不是针对真正的元素使用的选择器,伪元素选择器只能针对css中的伪元素起作用. css提供的伪元素选择器有如下几个:
selector1,selector2,selecotr3{ }
:first-letter :该选择器对应的css样式对指定对象的第一个字符起作用
:first-line 该选择器对应的css样式对指定对象的第一行内容起作用
:before 该选择器与内容相关的属性结合起来,用于在指定对象内部的前端插入内容
:after 该选择器与内容相关的属性结合起来,用于在指定对象的尾部插入内容.
/*实例*/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
span{
display: block;
}
span:first-letter{
color: #f00;
font-size: 20pt;
}
section:first-letter
{
color: #f00;
font-size: 40pt;
font-weight: bold;
}
p:first-letter
{
color:#f00;
font-size: 50pt;
font-weight: bold;
}
</style>
</head>
<body>
<span>abc</span>
<section>其实我内心有一道 nick</section>
<p>做人要疯狂</p>
</body>
</html>
UI元素状态伪类选择器
UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选,主要有如下几个:
seletor:link 匹配seletor选择器且未被访问过的元素.
seletor:visited 匹配seletor选择器且以被访问过的元素
seletor:active 匹配seletor选择器且处于被用户激活状态
seleotr:hover 匹配seletor选择器且处于鼠标悬停状态的元素
seletor:focus 匹配seletor选择器且已得到焦点的元素
seletor:enabled 匹配seletor选择器且当前处于可用状态的元素
seleotr:disabled 匹配seletor选择器且当前处于不可用状态的元素
seleotr:checked 匹配seletor选择器且当前处于选中状态的元素
seletor:default 匹配seletor选择器且页面打开处于选中状态
seletor:read-only 匹配seletor选择器且当前处于只读状态的元素
seletor:read-write 匹配seletor选择器且当前处于读写状态的元素
seletor:selection 匹配selector选择器的元素中当前被选中的内容
结构性伪选择器
结构性伪类选择器指的是根据HTML元素之间的结构关键进行筛选的伪类选择器,结构性伪类选择器有下面几个:
SELECTOR:root 匹配文档的根元素,
selector:first-child 匹配符合selector选择器,而且必须是其父元素的第一个子节点元素
selector:last-child 匹配符合selector选择器,而且必须是其父元素的最后一个子节点元素
selector:nth-child(n) 匹配符合selector选择器,而且必须是其父元素的第n个子节点元素
seletor:nth-last-child(n) 匹配符合seletor选择器,而且必须是其父元素的倒数第n个子节点元素
seletor:only-child 匹配符合seletor选择器,而且必须是其父元素的唯一子节点
seleotr:first-of-type 匹配符合seleotr选择器,而且是与它同类型,同级的兄弟第一个元素
seletor:last-of-type 匹配符合seletor选择器,而且是与它同类型,同级的兄弟最后一个元素
seletor:nth-of-type(n) 匹配符合seletor选择器,而且是与它同类型,第n个兄弟节点
seletor:nth-last-of-type(n) 匹配符合seleotr选择器,而且是与它同类型,倒数第n个兄弟节点
seletor:only-of-type 匹配符合seleotr选择器,而且是与它同类型的唯一兄弟节点
seleotr:empty 匹配符合seletor选择器,而且其内部没有任何子元素