选择器

选择器{样式 }

类选择器：相同的元素定义成不同的样式

伪类选择器：系统的选择器不能随意起名字

伪类选择器以及伪元素

<!DOCTYPE html>
<html lang="en"><!--//网页根元素  可使用root-->
<head>
 <meta charset="UTF-8">
 <title>伪类选择器以及伪元素</title>
  <script type="text/javascript" src="绘制动画.js"></script>
  <style>
    :root{
      background-color: blanchedalmond;//根元素背景
    }
    body{
      background-color: lightgreen;
    }
    p.left{
      text-align: left;
      color: #e54d26;
    }
    p.right{
      text-align: right;
      color:chartreuse;
    }
    a:link{
      color: violet;
    }
    a:visited{
      color: #222222;
    }
    a:hover{//放在上面时
      color: aqua;
    }
    a:active{//正在点击
      color:#d2d2d2;
    }

    p:first-line{//元素第一行使用
      color: violet;
    }
    p:first-letter{//首字母
      color:red;
      font-size: 24px;
    }
    p:before{
      color: gold;
      font-size: 19px;
      content: "融水公子";
    }
    p:after{
      color: blue;
      font-size: 34px;
      content: "1314520";
    }
    li{
      list-style: none;//去圆点
    }
    li:before{
      content: ".";
      color: gold;
    }
    li:after{
      content: "__after 追加文字";
      color: #222222;
    }
    // 结构性伪类选择器root not empty target
  </style>
</head>
<body onload="draw(''canvas'')">
<h1>类选择器</h1>
<p class="left">伪类选择器</p>
<p class="right">伪类选择器</p>
<br/>
<a href="绘制动画.js">绘制动画</a>
<p>作为长期占据着大7座SUV"霸主"的汉兰达而言，<br/>
  它能取得目前这样优秀的成绩，相信自然就具备了格外吸引人的一面</p>
<ul>
  <li><a href="index.html">伪类选择器</a></li>
  <li><a href="index.html">伪类选择器</a></li>
  <li><a href="index.html">伪类选择器</a></li>
  <li><a href="index.html">伪类选择器</a></li>
  <li><a href="index.html">伪类选择器</a></li>
  <li><a href="index.html">伪类选择器</a></li>
  <li><a href="index.html">伪类选择器</a></li>

</ul>
<canvas id="canvas" width="400",height="400"></canvas>

</body>
</html>

 
 分享知识，分享快乐！希望中国站在编程之巅！
               ----融水公子
公众微信号：rsgz520
360图书馆馆号：rsgz002.360doc.com

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。