CSS-属性选择器

来源：互联网发布：汽车调色软件编辑：程序博客网时间：2024/06/03 14:11

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>属性选择器</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       .big{
           background-color: blue;
       }
       .outer{
           width: 100px;
           height: 100px;
           border: 1px solid red;
       }
       /*选择div，并且有title属性的*/
       [title]{
           /*background-color: green;*/
       }
       [title=one]{
           /*background-color: green;*/
       }
       [title^=t]{
           /*background-color: green;*/
       }
       [title$=e]{
           /*background-color: green;*/
       }
       [title*=o]{
           /*background-color: green;*/
       }
       [title~=o]{
           /*background-color: green;*/
       }
       [class~=big]{
           margin: 10px;
       }
   </style>
</head>
<body>
   <div class="outer" title="one o"></div>
   <div class="outer big" title="two"></div>
   <div class="outer" title="three"></div>
   <div class="outer" title=""></div>
   <div class="outer"></div>
   <p title="pone">hello</p>
</body>
</html>

阅读全文

0 0