HTML 5開発シリーズ(3)のCSSでよく使われるセレクタ
子親リレーションシップセレクタ:
span
p
p span
div span
ラベルの特殊なステータスに設定するセレクタ:擬似クラスセレクタ
<style type="text/css">
/**
* ；
* ： ， ， ；
*/
/**
*
*/
a:link{
color: blue;
}
/**
* ；
*
* visited ； ；
* ie6 ；
*/
a:visited{
color: red;
}
/**
* ；
*/
a:hover{
color: green;
}
/**
* ；
*/
a:active{
color: goldenrod;
}
/**
* hover active
* ie6 ；
*/
/**
*
* ， ；
* ie6 ；
*/
input:focus{
background-color: red;
}
/**
*
* ie6 ， ；
*/
#p1::selection{
background-color: yellowgreen;
}
/* */
#p1::-moz-selection{
background-color: yellowgreen;
}
</style>
<a href="http://www.baidu.com"> </a>
<br/>
<br/>
<a href="http://www.baidu.com1111"> </a>
<br/>
<br/>
<input type="text"/>
<br/>
<br/>
<p id="p1"> </p>
</code></pre>
<p> ： </p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style type="text/css">
/*
* ： ； ；
* first-line ；
*/
p:first-letter{
color: red;
font-size: 50px;
}
/**
* before ，
* content ；
*/
p:before{
content: "111111111111";
color: red;
}
/*
* after
* ， ；
*/
p:after{
content: "222222222222";
color: orange;
}
</style>
<p> </p>
</code></pre>
<p> ， ：</p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style type="text/css">
/**
* p title p ；
*/
p[title]{
color: red;
}
/**
* p title=“meinv” p ；
*/
p[title="meinv"]{
color: yellow;
}
/*
* title han p ；
*/
p[title^="han"]{
color: blue;
}
/*
* title ld p ；
*/
p[title&="ld"]{
color: orange;
}
/*
* title jav p ；
*/
p[title*="jav"]{
color: green;
}
</style>
<!--
title ；
-->
<p title="hello"> </p>
<p title="meinv"> </p>
<p title="hanzi"> </p>
<p title="hello wold"> </p>
<p title="hello java"> </p>
</code></pre>
<p> ：</p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style type="text/css">
/*
* p
*/
p:first-child{
color: red;
}
/*
* ， p ；
*/
p:last-child{
color: blue;
}
/*
* ， p ；
*/
p:nth-child(3){
color: green;
}
/*
* div p ；
*/
div>p:first-child{
color: orange;
}
/*
* p ，
* last-of-type p
* nth-of-type p ；
*/
p:first-of-type{
color: olive;
}
</style>
<span>hahah</span>
<p> p </p>
<p> p </p>
<div>
<p> div p </p>
</div>
<p> p </p>
<p> p </p>
<p> p </p>
</code></pre>
<p> ：</p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style type="text/css">
/*
* span ， p ；
*/
span + p{
color: orange;
}
/*
* span p ；
*/
span ~ p{
color: green;
}
</style>
<p> p </p>
<p> p </p>
<p> p </p>
<span>wo shi yi ge span</span>
<div>wo shi div</div>
<p> p </p>
<p> p </p>
<p> p </p>
</code></pre>
<p> ：</p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style type="text/css">
/**
* class=hello p， p
*/
p:not(.hello){
color: red;
}
</style>
<p> p </p>
<p> p </p>
<p class="hello"> p </p>
<p> p </p>
<p> p </p>
</code></pre>
<p> </p>
</div>
</div>
</div>
</div>