参考
- CSS 元素选择器
- CSS 选择器分组
- CSS 类选择器详解
- CSS ID 选择器详解
- CSS 属性选择器详解
- CSS 后代选择器
- CSS 子元素选择器
- CSS 相邻兄弟选择器
- CSS 伪类
- CSS 伪元素
********************************
元素选择器又称为类型选择器（type selector）区别"类选择器"
1.声明了 !DOCTYPE，使用W3C的标准 以兼容浏览器
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="/tiy/tc.css">
<style type="text/css">
h1 > strong
{color:red;}
</style>
</head>
<body>
<h1>This is
<strong>very</strong> <strong>very</strong>
important.</h1>
<h1 >This is <em>really
<strong>very</strong></em> important.</h1>
<h1
style="color:blue">This is <em>really
<strong>very</strong></em>
important.</h1>
</body>
</html>
2.相同HTML元素有多个css class,如果有冲突的css ;后面覆盖前面.
优先次序
外部css < 内部css <
元素属性style
(如果有冲突的css ;后面覆盖前面)
********************************
1.CSS
元素选择器 a{color:red;} p{color:red;}
2.CSS选择器分组 a, p
{color:red;}
3.CSS
类选择器 .nav{color:blue;} a .nav{blue;}
<a
class="nav" link="">
This paragraph is very important.
</a>
4.CSS
ID 选择器
#title{color:}
q
<h1 id="title"> </h1>
5.CSS
属性选择器
img[alt]
{border: 5px solid red;}
6.
CSS 后代选择器
(不论中间隔了多少代
都起作用)
h1 em {color:red;}
7.CSS
子元素选择器
h1
> strong {color:red;}
<h1>This
is <strong>very</strong> <strong>very</strong>
important.</h1>
8.CSS
相邻兄弟选择器
9.CSS
伪类
锚伪类(顺序敏感)
a:link
{color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /*
已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color:
#0000FF} /* 选定的链接 */
:active
向被激活的元素添加样式。 1
:focus
向拥有键盘输入焦点的元素添加样式。 2
:hover
当鼠标悬浮在元素上方时，向元素添加样式。 1
:link
向未被访问的链接添加样式。 1
:visited
向已被访问的链接添加样式。 1
:first-child
向元素的第一个子元素添加样式。 2
:lang
向带有指定 lang 属性的元素添加样式。 2
提示：在
CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在
CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
a.cred
: visited {color: #FF0000}
<a
class="cred" href="css_syntax.asp">CSS Syntax</a>
10.CSS
伪元素
:first-line
伪元素
:first-letter 伪元素
:before 伪元素
:after 伪元素
=================================
块元素 ul 导航条
<!DOCTYPE
html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
width:400px;
}
li
{
display:inline-block;
width:90px;
}
a
{
display:block;
}
</style>
</head>
<body>
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li><a
href="#contact">Contact</a></li>
<li><a
href="#about">About</a></li>
</ul>
</body>
</html>
======================
外边距合并的意义
none
此元素不会被显示。
block
此元素将显示为块级元素，此元素前后会带有换行符。
inline
默认。此元素会被显示为内联元素，元素前后没有换行符。
<!DOCTYPE
html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
vertical-align:middle;
}
li
{display:inline;
}
a
{
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body
>
<div
style="text-align:center;">
<p>
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li><a
href="#contact">Contact</a></li>
<li><a
href="#about">About</a></li>
</ul>
</P>
<p><b>注释：</b>如果没有规定
!DOCTYPE，则浮动项目会产生意想不到的结果。</p>
<p>为了显示出链接区域，我们为链接添加了背景色。</p>
<p><b>注释：</b>向
ul 元素添加 overflow:hidden，是为了防止 li 元素出现在列表之外。
</p>
</div>
</body>
</html>
li的默认display为block，将其这个属性改为inline便可实现这种ul
li居中的问题
<style
type="text/css">
#bNav{
margin-top:10px;
background:#D9EBF5;
text-align:center;
}
#bNav
ul{
padding:4px 0;
margin:0;
overflow:hidden;
}
#bNav ul
li{
display:inline;
padding:0;
}
</style>
<div
id="bNav" class="bNav">
<ul>
<li><a
href="index.aspx" title="Home">Home</a></li>
<li>|</li>
<li><a href="info.aspx?info_id=8"
title="About Us">About Us</a></li>
<li>|</li>
<li><a href="info.aspx?info_id=9"
title="Department Design">Department
Design</a></li>
<li>|</li>
<li><a href="info.aspx?info_id=10"
title="Law Declaration">Law
Declaration</a></li>
<li>|</li>
<li><a href="info.aspx?info_id=11"
title="Contact Us">Contact Us</a></li>
</ul>
</div>
li
{
list-style-type: none;
display: inline;
}
CSS 选择器
原文：http://www.cnblogs.com/WR-HAPPY/p/3541242.html
