zoukankan      html  css  js  c++  java
  • css3选择器

    css3选择器

    1.属性选择器:[attr*=val],[attr^=val],[attr$=val];attr表示样式标签,val表示类名

     1 <style type="text/css" >
     2 <!--所有id中包含section1的应用该样式-->
     3 [id*=section1]{
     4     background:#6F9;
     5     color:#3CC;
     6     }
     7 <!--所有id开头中包含sub的应用该样式-->
     8 [id^=sub]{
     9     background:skyblue;
    10     color:#fff;
    11     }
    12 <!--所有id结尾包含-2应用该样式-->

    13 [id$=\-2]{
    14     background:#6F9;
    15     color:#3CC;
    16     }
    17 
    18 </style>
    19 <body>
    20 
    21 <div id="subsection1">这是一个属性选择器</div>
    22 <div id="section1-1">这是一个属性选择器</div>
    23 <div id="section1-2">这是一个属性选择器</div><br />
    24 
    25 <div id="subsection2">这是一个属性选择器</div>
    26 <div id="section2-1">这是一个属性选择器</div>
    27 <div id="section2-2">这是一个属性选择器</div><br />
    28 
    29 <div id="subsection3">这是一个属性选择器</div>
    30 <div id="section3-1">这是一个属性选择器</div>
    31 <div id="section3-2">这是一个属性选择器</div>
    32 
    33 </body>

    2.结构性伪类选择器:first-line,first-letter,before,after

    li.style:before{
        content:url(style.jpg);
        }
    li.style:after{
        content:"这是插入的文字";
        }
    li.style:first-line{
        background:#6F6;
        }
    li{list-style:none;}    
    
    
    <li class="style">使用选择器<br />插入文字、图片 </li>

  • 相关阅读:
    css3 动画
    jQuery toast 淡入淡出提示
    JavaScript事件——拖拉事件
    Vue -- element-ui 限制只能输入number
    css 移动端页面,在ios中,margin-bottom 没有生效
    django 快速搭建blog
    python 正则表达式口诀
    [转]python os模块 常用命令
    【转】scapy 构造以太网注入帧
    【转】关于Scapy
  • 原文地址:https://www.cnblogs.com/Alexin/p/3285538.html
Copyright © 2011-2022 走看看