简单的CSS选择器

简单的CSS选择器例子

*               匹配页面所有元素        

node2:/var/www/html#cat m52.html 
<style>
a *
{
background-color:yellow;
}
</style>

<a><li>123</li></a>
<li>456</li>

选择<a>元素内的所有元素：



ID选择器     
 
#ID {
 CSS规则 
}


node2:/var/www/html#cat m52.html 
<style>
#ttt
{
background-color:yellow;
}
</style>

<a ><li id='ttt'>123</li></a>
<li>456</li>
<p id='ttt'>vvv</p>


.specail-class   匹配样式为special-class的元素   

node2:/var/www/html#cat m52.html 
<style>
.test
{
background-color:yellow;
}
</style>

<a  ><li id='ttt'>123</li></a>
<li>456</li>
<p id='ttt'>vvv</p>
<p id='ttt' class='test'>gggg</p>




a          匹配a标签   

<style>
a
{
background-color:yellow;
}
</style>
<a>000</a>
<a><li id='ttt'>123</li></a>
<li>456</li>
<p id='ttt'>vvv</p>
<p id='ttt' class='test'>gggg</p>


a.special-class 匹配所有样式special-class的a标签
node2:/var/www/html#cat m52.html 
<style>
a.c1
{
background-color:yellow;
}
</style>
<a>000</a>
<a class='c1'>111</a>
<a><li id='ttt'>123</li></a>
<li>456</li>
<p id='ttt'>vvv</p>
<p id='ttt' class='test'>gggg</p>