CSS 选择器

浏览数：17 / 时间：2015年06月09日

参考

http://www.w3school.com.cn/css/index.asp

CSS 元素选择器
CSS 选择器分组
CSS 类选择器详解
CSS ID 选择器详解
CSS 属性选择器详解
CSS 后代选择器
CSS 子元素选择器
CSS 相邻兄弟选择器
CSS 伪类
CSS 伪元素

********************************

元素选择器又称为类型选择器（type selector）区别"类选择器"

1.声明了 !DOCTYPE，使用W3C的标准以兼容浏览器

<!DOCTYPE HTML>
<html>
<head>

</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;}

a[href="http://www.w3school.com.cn/about_us.asp"] {color: 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居中的问题

<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 选择器