zoukankan      html  css  js  c++  java
  • [CSS3]移动Web开发系列之CSS3增强型选择器

    css3是移动Web开发的主要技术之中的一个。当前。CSS3技术最适合在移动Web开发中使用的特性有增强的选择器、阴影、强大的背景设置

    、圆角边框

    接下来我们主要解说增强型的选择器。主要分两种,属性选择器和伪类选择器

    1、属性选择器

    1.1全然匹配选择器

    语法:[attribute=value]

    <span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div>
    <style type="text/css">
    [id=article]{
    	color:red;
    }
    </style></span>

    1.2包括匹配选择器

    语法:[attribute*=value]

    <span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div>
    <div id="subarticle">属性匹配选择器</div>
    <div id="article1">属性匹配选择器</div>
    <style type="text/css">
    [id*=article]{
    	color:red;
    }
    </style></span>
    1.3首字符匹配选择器

    语法:[attribute^=value]

    <span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div>
    <div id="subarticle">属性匹配选择器</div>
    <div id="article1">属性匹配选择器</div>
    <style type="text/css">
    [id^=article]{
    	color:red;
    }
    </style></span>
    1.4尾字符匹配选择器

    语法:[attribute$=value]

    <span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div>
    <div id="subarticle">属性匹配选择器</div>
    <div id="article1">属性匹配选择器</div>
    <style type="text/css">
    [id$=article]{
    	color:red;
    }
    </style></span>

    2、伪类选择器

    CSS3选择器中,伪类选择器种类许多,在CSS2.1时代。伪类选择已经存在。比如超链接的四个状态选择器

    a:link、a:visited、a:hover、a:active

    CSS3添加了许多的选择器,当中包含:

    first-line 伪元素选择器

    first-letter伪元素选择器

    root选择器

    not选择器

    empty选择器

    target选择器




  • 相关阅读:
    使用video.js支持flv格式
    微信小程序开发(一)
    python advanced programming ( II )
    python advanced programming ( I )
    HTML/CSS
    info AI drive
    python基础回顾
    计算机组成原理2
    6.00.1x Introduction to computation
    有一种感动叫ACM(记陈立杰在成都赛区开幕式上的讲话)
  • 原文地址:https://www.cnblogs.com/clnchanpin/p/7257422.html
Copyright © 2011-2022 走看看