css选择器+js

来源:互联网 发布:存续期缺口知乎 编辑:程序博客网 时间:2024/05/14 07:15

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
<style type="text/css">
<!--
div#div1
{ font-style:italic;}  
div#div2  ul  li  
{   font-style:bold;}
-->
</style>
<!-- 1 使用id选择器-->
<!-- 2 使用层次选择器-->
 </HEAD>

 <BODY>

 <div id="div1">
    <ul>
        <li>hello! how are you!</li>
        <li>hello! how are you!</li>
        <li>hello! how are you!</li>
    </ul>
 </div>  
 
<div id="div2">
    <ul>
        <li>hello! how are you!</li>
        <li>hello! how are you!</li>
        <li>hello! how are you!</li>
    </ul>
 </div>  
 </BODY>
</HTML>

 

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <style type="text/css">
 <!--
 .style1      
{background-color:#ffffff;color:#000000;}
 .style1 ul li 
{list-style-type:circle; }
 
 .style2      
{background-color:#000000;color:#ffffff;}
 .style2 ul li 
{list-style-type:disc; }

  .style3      
{background-color:#0000ff;color:#ff0000;}
 .style3 ul li 
{list-style-type:disc; }

  .style4      
{background-color:#ff0000;color:#ffff00;}
 .style4 ul li 
{list-style-type:circle; }
 -->
  </style>
 <BODY>
 <div id="div2">
    <ul>
        <li>hello! how are you!</li>
        <li>hello! how are you!</li>
        <li>hello! how are you!</li>
    </ul>
 </div>

 <select onchange="document.getElementById('div2').className=this.value">
     <option value="style1">请选择</option>
     <option value="style2">样式一</option>
     <option value="style1">样式二</option>
      <option value="style3">样式三</option>
      <option value="style4">样式四</option>
  </select>
  
 </BODY>
</HTML>