CSS选择器
基础语法
CSS规则由两个主要部分构成：选择器，以及一条或者多条声明
selector {declaration1; declaration2; ... declarationN }
如：
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
如果值为多个单词，则要给值加引号：
p {font-family: "sans serif";}
分组：
h1,h2,h3,h4,h5,h6 {
color: green;
}
子元素从父元素继承属性。
body {
font-family: Verdana, sans-serif;
}
不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。
如果有子元素希望有特殊的样式，可以再加一条特定规则：
body {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
派生选择器
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
下面是它施加影响的 HTML：
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<!-- h2>strong颜色为蓝色 -->
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
id选择器
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p>
结合派生选择器：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
类选择器
.center {text-align: center}
元素也可以基于它们的类而被选择：只有类名为 fancy 的表格单元将是带有灰色背景的橙色。
td.fancy {
color: #f60;
background: #666;
}
-
多类选择器
<p class="important warning"> This paragraph is a very important warning. </p>
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
属性选择器
-
为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
-
为 title="W3School" 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
-
为包含指定值的 title 属性的所有元素设置样式。
[title~=hello] { color:red; }
-
多个属性值匹配
a[href] {color:red;}
-
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
如何插入样式表
-
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
-
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
-
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
-
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
元素选择器
html {color:black;}
p {color:gray;}
h2 {color:silver;}
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <!--生效--> <h1>This is <em>really <strong>very</strong></em> important.</h1>
结合后代选择器和子选择器
table.company td > p
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素
h1 + p {margin-top:50px;}
伪类
-
超链接不同状态设置不同的样式
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
-
伪类可以与 CSS 类配合使用：
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
-
first-child 伪类
p:first-child {font-weight: bold;}/* 作为某元素第一个子元素的所有 p 元素设置为粗体*/
<html>
<head>
<style type="text/css">
p > i:first-child {/*选择器匹配所有 <p> 元素中的第一个 <i> 元素*/
font-weight:bold;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
<html>
<head>
<style type="text/css">
p:first-child i {/*作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素*/
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
伪元素
-
"first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
-
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
伪元素可以与 CSS 类配合使用
-
":before" 伪元素可以在元素的内容前面插入新内容。
h1:before
{
content:url(logo.gif);
}
-
":after" 伪元素可以在元素的内容之后插入新内容。
h1:after
{
content:url(logo.gif);
}
------end-----
浙公网安备 33010602011771号