zoukankan      html  css  js  c++  java
  • css3中追加的三种选择器

    1.css3追加的3中选择器:[att*=val],[att^=val],[att$=val]

    2.[att*=val]
    *是通配符,表示只要字符串中出现了这个val的(哪怕val只是一部分),如这个例子:[class*=div]:表示凡是div这个类都会出现效果(包含即可,不论是sdfasdiv还是divsfas)。
    比如下面的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    [class*=div]{
        color:#00F;}
    </style>

    </head>

    <body>
    <div class=div1>
    i'm a student
    </div>
    <div class=div2>
    i'm a student
    </div>
    <div class=div3>
    i'm a student
    </div>
    <div class=di>
    i'm a student
    </div>
    </body>
    </html>


    3.[att^=val]:表示首字母串是val的会出现效果,比如下面的例子:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    [class^=div]{
        color:#0F0}
    </style>

    </head>

    <body>
    <div class=1div1>
    i'm a student
    </div>
    <div class=2div2>
    i'm a student
    </div>
    <div class=div3>
    i'm a student
    </div>
    <div class=di>
    i'm a student
    </div>
    </body>
    </html>

    4.[att$=val]:表示结束字母串是val的出现效果,如下面这个例子:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    [class$=i]{
        color:#0F0}
    </style>

    </head>

    <body>
    <div class=1div1>
    i'm a student
    </div>
    <div class=2div2>
    i'm a student
    </div>
    <div class=div3>
    i'm a student
    </div>
    <div class=di>
    i'm a student
    </div>
    </body>
    </html>
    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    java注解,通过反射解析注解,模仿hibernate,获取sql语句。
    Eclipse/Myeclipse中查看和调试JDK源代码的方法
    TCP为什么会出现 RST
    《浅谈F5健康检查常用的几种方式》—那些你应该知道的知识(二)
    负载均衡服务TCP端口健康检查成功,为什么在后端业务日志中出现网络连接异常信息?
    haproxy的丰富特性简介
    健康检查概述
    firewall防火墙常用操作
    gitlab修改默认端口
    vim脚本判断操作系统
  • 原文地址:https://www.cnblogs.com/comefuture/p/8305989.html
Copyright © 2011-2022 走看看