CSS高级系列之多种选择器及权重值

来源：互联网发布：数据库密码忘了怎么办编辑：程序博客网时间：2024/06/05 19:28
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>演示多种选择器</title>    <style type="text/css">        /*标签选择器*/        p{            color: red;        }        /*类选择器 showClass就是类选择器的类名*/        .showClass{            color: cyan;        }        /*id选择器,showId就是这个id选择器的名字*/        #showID{            color: yellowgreen;        }        /*子选择器*/        /*div标签的第一个阶级的span子标签的样式*/        div>span{            color: aquamarine;        }        /*后代选择器*/        div strong{            color: chartreuse;        }       /*组合选择器*/        div, p{            color: darkorchid;        }        /*通用选择器*/        *{            background-color: deeppink;        }    </style></head><body>   <div>       <span>我是div的子span标签</span>       <p><span>我是div的子标签中的子标签</span></p>   </div>   <div>       <strong>我是什么颜色呢</strong>       <div>我又是什么<strong>颜色呢?</strong></div>   </div>   <div>我是用来演示组合选择器的div标签</div>   <p>我是用来演示组合选择器的p标签</p><!--权重值--><!--就近原则-->    <!--谁离当前标签近,那么就是用哪个选择器,-->    <p>我显示的是就近原则的颜色</p>    <!--id选择器>类选择器>标签选择器-->    <!--<p id="idSelector" class="classSelector">-->        <!--我显示的颜色-->    <!--</p>-->    <!--内联式>嵌入式-->   <p class="classSelector">欧文</p>   <p style="color: chartreuse" id="idSelector">       我是用来显示内联式   </p>    <!--线面色数就叫权值-->    <!--标签选择器:1-->    <!--类选择器:10-->    <!--id 选择器:100-->    <!--内联选择器:1000--></body></html>
阅读全文
0 0