CSS知识点

今天下了杨正袆老师的"阿一web标准学堂"第3课：CSS选择符进阶知识http://www.cnblogs.com/JustinYoung/archive/2008/04/30/ayi03-selector-adv.html

对CSS有一个新的了解:

1.伪类和伪对象:

<html>

<head>

<style type="text/css" >

//这里的link visited hover active 等就是伪类,他们主要依附于a标签,不能单独存在

a:link,a:visited,a:hover,a:active {

Color:red;

}

//这里的first-line就是一个针对第一行的伪对象

#testId first-line

{

Color:red;

}

//这里的first-letter就是一个针对第一个字母的伪对象,

//它的一个实体对象,所以说伪类对一类的标签,伪对象是对某一种实体

#testId first-letter

{

Font-size:200%;

Float:right;

}

</style>

</head>

<body>

//这里设置title属性,为了方便如蜘蛛等等搜 索引擎,搜索到网页

<a href=" #" title="测试">测试超链接</a>

<div id ="testId">

这是一个伪对象的测试文字,

这是一个伪对象的测试文字

</div>

</body>

</html>

2. 伪类选择符进阶知识

<html>

<head>

<style type="text/css" >

//这里的link visited hover active 等就是伪类,他们主要依附于a标签,不能单独存在

a:link,a:visited,a:hover,a:active {

Color:red;

}

//这是错误的写法,这样会改写上面的visited hover active,真正生效的是link

#testId a:link, a:visited,a:hover,a:active

{

Color:blue;

}

//正确的写法是:

#testId a:link, #testId a:visited, #testId a:hover, #testId a:active

{

Color:blue;

}

</style>

</head>

<body>

<a href=" #" title="测试">测试超链接</a>

<div id ="testId">

<a href=" #" title="测试">测试超链接</a>

</div>

</body>

</html>

3.clear:both是消除两旁的float对象

.clear

{
clear: both;

}

4. 属性选择符进阶知识

<style type="text/css">

外站链接

 

//判断是否为外站链接

a[target="_blank"]{

    padding-right:12px;

    background:url('outLink.gif') no-repeat center right;

}

[att$=val]

 

//在属性中以某值结尾

a[href$=".zip"]

{

    padding-right:16px;

background: url('icon_zip.gif') no-repeat center right;

}

[att^=val]

 

//在属性中以某值开头

 

a[href^="mail"]

{

    padding-right:16px;

background: url('icon_mailto.gif') no-repeat center right;

}

[att*=val]

 

//属性中包含某些值

a[href*="www.cnblogs.com"]

{

    padding-right:16px;

background: url('icon_cnblog.gif') no-repeat center right;

}

</style>

 

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />

    <meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />

    <title>YES!B/S!文章示例页面</title>

    <style type="text/css">

        *{

            font-size:14px;

        }

    </style>

</head>

<body>

<h3>伪类</h3>

<style type="text/css">

a:link,a:visited,a:active{

    color:red;

}

a:hover{

    color:blue;

}

.testLink2:link,.testLink2:visited,.testLink2:hover,.testLink2:active{

    color:yellow;

}

/*** 错误演示

#pseudo_classe a:link,a:visited,a:active{

    color:green;

}

***/

#pseudo_classe a:link,#pseudo_classe a:visited,#pseudo_classe a:active{

    color:green;

}

</style>

<a href="http://justinyoung.cnblogs.com/" title="测试用链接" >这是一个链接</a><br />

<a href="http://justinyoung.cnblogs.com/" title="测试用链接2" class="testLink2">这是一个链接2</a><br />

<div id="pseudo_classe">

    <a href="http://justinyoung.cnblogs.com/" title="测试用链接3" >这是一个链接3</a>

</div>

<h3>伪对象</h3>

<style type="text/css">

    #pseudo_element:first-line{

        color:red;

    }

    #pseudo_element:first-letter{

        font-size:260%;

        float:left;

    }

</style>

<div id="pseudo_element">

阿一web标准学堂是一套面向web标准初学者的视频系列。虽然我也只是一个web标准刚入门的学习者，但是我还是希望能通过这个学堂将自己学习到的东西与大家分享，这样不仅可以让更多的朋友走上web标准设计的道路，更重要的是可以得到很多前辈们的指点和教导，从而更快的取得进步。所以，各位朋友如果在学堂上发现错误之处，欢迎你到【博客园web标准设计小组】交流讨论，从而帮助更多的人取得更快的进步。

</div>

<h3>伪类进阶(IE7以上浏览器)</h3>

<style type="text/css">

#pseudo_classe_ad{

    88px;

    height:31px;

    background:url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/message1.gif') no-repeat;

    cursor:pointer;

}

#pseudo_classe_ad:hover{

    background:url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/message2.gif') no-repeat;

}

#pseudo_classe_ad2{

    border:1px solid #999;

}

#pseudo_classe_ad2:hover{

    border:1px solid #333; /*** 变化不明显可以用红色 ***/

}

</style>

<div id="pseudo_classe_ad">

</div>

<br />

<input type="text" id="pseudo_classe_ad2" />

<h3>属性选择符进阶知识</h3>

<style type="text/css">

a[target="_blank"]{

    padding-right:12px;

    background:url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/outLink.gif') no-repeat center right;

}

a[href$=".zip"]

{

    padding-right:16px;

background: url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/icon_zip.gif') no-repeat center right;

}

a[href^="mail"]

{

    padding-right:16px;

background: url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/icon_mailto.gif') no-repeat center right;

}

/*** 和伪类配合实现更好的效果 ***/

a[href^="mail"]:hover{

background: url('http://www.cnblogs.com/skins/ChinaHeart/images/titleICO.jpg') no-repeat center right;     

}

/*** 和伪类配合实现更好的效果 ***/

a[href*="www.cnblogs.com"]{ /*** 可以先以cnblogs看看效果 ***/

    padding-right:16px;

background: url('http://www.cnblogs.com/images/cnblogs_com/justinyoung/common/icon_cnblog.gif') no-repeat center right;

}

</style>

<a href="#" title="本站链接">本站链接</a><br />

<a href="http://justinyoung.cnblogs.com/" title="外站链接" target="_blank">外站链接</a>

<br />

<a href="http://justinyoung.cnblogs.com/download.zip" title="zip文件">zip文件是.zip结尾的链接</a><br />

<a href="mailto:dushizhuma@163.com" title="给我电邮">给我电邮，是以mailto开头的链接</a><br />

<a href="http://www.cnblogs.com" title="包含博客园网址">包含www.cnblogs.com链接的地址</a>

<h3>选择符的优先级</h3>

<!--======新建一个文件======-->

<h4>元素选择符，从上到下</h4>

<style type="text/css">

    div{color:red;}

    div{color:blue;}

</style>

<div>

这里是div

</div>

<h4>元素选择符和class</h4>

<h4>class和id</h4>

<div id="div_id1" class="div_class1">

    <div class="div_class2">

        这里是测试文字。

    </div>

</div>

<h4>id和style</h4>

<h4>元素、class和id</h4>

<div id="div_id1" class="div_class1">

    <div class="div_class2" id="div_id2">

        <span>这里是测试文字</span>

    </div>

</div>

</body>

</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liangwei389/p/1177876.html