您的位置：首页 > Web前端 > CSS

css的扩展选择器

2015-10-10 10:58 411 查看

代码示例如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>扩展选择器</title>
<style type="text/css">
/*
扩展选择器：
a.组合选择器:用逗号隔开多个选择器
b.关联选择器(后代选择器)：用空格隔开
c.伪类选择器：
c.1 静态伪类：:link,:visited,只能用于超链接  link表示点击之前的颜色，visited表示点击之后的颜色
c.2 动态伪类：适用于各种标签
:onfocus 控件获得焦点
:active 点击控件的时候
:hover 当鼠标移动到某个控件上方的时候

a{}与a:link{}:
区别：a{}包括了锚点 a:link{}不包括锚点
*/
div,p,h4,.one,#two{           /*这是一个组合选择器*/
border:5px solid red;    /*px单位记得加上*/

}

h3 i {                       /*h3 和 i并不一定得紧挨着，这个就是一个关联选择器*/
color: red;
}

h3 b  .two{                       /*h3 和 .two并不一定得紧挨着，这个就是一个关联选择器*/
border:solid green;
}
a:link{
color:red;
}
a:visited{
color:yellow;
}

input:focus{
border:3px solid red;
color:red;
background:blue;
}
p:active{
color:red;
}
i:hover{
cursor:hand;
}
</style>
</head>
<body>

<div>钟燕，我想你了！</div>
<p>钟燕，最近过得好吗？</p>
<h4>钟燕</h4>

<h3 class = "one">i miss you</h3>

<h5 id = "two">i'm being with you</h5>

<h3>my <b>hero is <i>will smith!</i></b></h3><br>

<i>will smith</i> <br>

<h3>my <b>hero is <i class = "two">will smith!</i></b></h3><br>

<a href = "">it's test</a><br>

focus:<input type="text" name="">
<p>你好吗？</p>

<i>最近过得怎样？</i>   <!--关于hover，貌似是我的EditPlus版本太低的原因，还不支持-->

</body>
</html>

运行结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航