关于网页前端中的 css选择器

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <link rel="shortcut icon" href="img/mynote.ico"/>
       <link rel="stylesheet" type="text/css" href="css/reset.css" />
       <title>css选择器</title>
       <style type="text/css">
           * {
               word-break: break-all;
               overflow: hidden;
           }
           /*标签选择器,权值最小,为1*/
           /*为所有的div元素(全部的div)添加样式*/

           div {
               width: 100px;
               height: 100px;
               position: relative;
               top: 10px;
               left: 10px;
               border: 2px solid black;
               background: red;
               display: inline-block;
           }
           /*为父级div元素的子级div元素(全部的子级div)添加样式*/

           div>div,span {
               width: 40px;
               height: 76px;
               border: 2px solid black;
               background: gold;
               display: inline-block;
               position: absolute;
               top: 15px;
           }
           /*为父级元素的子级元素分别添加样式*/

           div>div {
               left: 5px;
           }

           div>span {
               left: 55px;
           }

           div>div>span {
               /*为父级元素的子级元素的子级元素添加样式*/
               width: 20px;
               height: 52px;
               position: absolute;
               left: 5px;
               border: 2px solid black;
               background: green;
               display: inline-block;
           }
           /*为多个同级元素添加样式*/

           div,p {
               color: blue;
           }
           /*类名选择器,权值为10*/

           .cDiv3,.cDiv4 {
               width: 150px;
               height: 150px;
               /*!important权值最高*/
               background: lightblue !important;
           }

           .yanSe {
               background: lawngreen;
           }
           /*id选择器,权值为100*/

           #div5,#div6 {
               width: 200px;
               height: 200px;
           }
       </style>
   </head>

<body>
       <div id="div1">
           1
           <div id="div11">
               11
               <span id="span111">
                   111
               </span>
           </div>
           <span id="span12">
               12
           </span>
       </div>
       <div id="div2">
           div你好
       </div>
       
       <div id="div3" class="cDiv3 yanSe"></div>
       <div id="div4" class="cDiv4 yanSe"></div>
       <div id="div5"></div>
       <div id="div6"></div>
       <div id="div7"></div>
       <div id="div8"></div>
       <br />
       <br />
       <br />
       <hr />
       <p>p你好</p>
   </body>

</html>

关于网页前端中的 css选择器

猜你喜欢