CSS选择器示例

最新推荐文章于 2024-09-27 19:45:19 发布

iteye_18539

最新推荐文章于 2024-09-27 19:45:19 发布

阅读量321

点赞数

分类专栏： js 文章标签： CSS 浏览器 .net HTML

本文链接：https://blog.csdn.net/iteye_18539/article/details/81618256

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Html代码：

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<h2>CSS选择器演示</h2>
<hr>
说明：CSS的基本选择器有元素选择器，后代选择器(关联选择器)，Class选择器，ID选择器，伪类；<br>
高级选择器有子选择器，相邻选择器以及属性选择器。<br>
在实际使用中，通常通过各种选择器的组合使用来精确控制文档样式。<br>
注意：对于不同浏览器对于CSS选择器种类支持各有区别，一般来说基本选择器是支持的。
<hr>
<div class="headContent">
<ul>
<li id="firstItem">
<a href="#" >
阅读
</a>
</li>
<li>
<a href="#" rel="me">
发现
</a>
</li>
<li>
<a href="#" rel="you me it">
评论
</a>
</li>
<li>
<a href="#" rel="me">
小组
</a>
</li>
<li>
<a href="#">
译消息
</a>
</li>
<li>
<a href="#">
翻译
</a>
</li>
<li>
<a href="#">
自己
</a>
</li>
<li id="endItem">
<a href="#">
帮助
</a>
</li>
</ul>
</div>
</body>

CSS代码：

/*元素选择器*/
body{color:#000000;font-size:13px}
/*后代选择器*/
body h2{
color:red;
font-size:32px;
}
/*类选择器*/
.headContent{
layout-flow: horizontal;
PADDING: 6px 0px 0px 1px;
MARGIN: 4px 0px 3px 5px;

}
/*组合选择器：类选择器与后代选择器的结合使用*/
.headContent ul{
font-size:16px;
list-style-type:none;
}
.headContent li{
float:left;
margin:0px 0px 4px 4px;
padding:10px;
background-color:#c5c5c5;
}
/*伪类*/
a{
TEXT-DECORATION: none;
}
a:link{
color:blue;
}
a:visited{
color:green;
font-size:85%;
}
a:hover{
background-color:yellow;
TEXT-DECORATION: underline;
}
/*ID选择器*/
#endItem{
font-size:20px;
font-weight:bold;
}
#firstItem{
font-size:24px:
background-color:write;
}
/*子选择器*/
#endItem>a{
cursor : help;
}
/*相邻选择器*/
h2+hr{
border-style :dotted;
}
/*属性选择器:找属性rel等于me的a元素*/
a[rel="me"]{
cursor : wait;
}
/*属性选择器:找属性rel包含it的a元素*/
a[rel~="it"]{
cursor :crosshair;
}
[url]http://www.blogjava.net/ponzmd/archive/2007/12/17/168369.html[/url]