宽容他人，放过自己。

css选择器

Posted on Jun 10, 2016 By anchoriteFili

@charset "UTF-8";
/* CSS Document */

body {
    background:#063 url("http://c.hiphotos.baidu.com/image/pic/item/b3b7d0a20cf431ad799ccaf94f36acaf2fdd98a0.jpg") repeat left top;
}

/*派生选择器*/
li strong {
    color:#C00;
}

strong {
    color:#CC9;
}

/*id选择器*/
#pid {
    color:#90F;
}

#divid {
    color:#360;
}

/*id选择器和派生选择器同时使用*/
#pid a {
    color:#F3C;
}

#divid p {
    color:#66C;
}

/*类选择器*/
.pclass {
    color:#FF0;
}

.divclass {
    color:#96C;
}

/*类选择器和派生选择器*/
.pclass a {
    color:#0F0;
}

.divclass p {
    color:#0C3;
}

html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css练习</title>
<link rel="stylesheet" type="text/css" href="css练习.css">
<style type="text/css">
[title] {
    color:#9F6;
}

[title=te] {
    color:#363;
}

</style>
</head>
<body>

<p><strong>p标签</strong></p>
<ul>
<li><strong>li标签</strong></li>
</ul>

<p id="pid">id选择器<a href="../../../Pictures/边框.png">id选择器和派生选择器同事使用</a></p>

<div id="divid">
divid测试
<p>div内部的p标签</p>
</div>

<p class="pclass">pclass测试<a>plass派生</a></p>

<div class="divclass">
divclass测试
<p>divclass派生</p>
</div>

<p title="t">属性选择器</p>
<p title="te">属性选择器te</p>

</body>
</html>