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>
    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    订单号生成规则
    mysql启动错误:mysql.sock丢失
    【转】Nginx服务并发过10万的Linux内核优化配置
    代理(正向代理)跟反向代理的区别
    php socket编程入门
    CentOS更改yum源与更新系统
    查看github.com上代码star排行
    html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用
    html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用
    html基本标签介绍及应用
  • 原文地址:https://www.cnblogs.com/comefuture/p/8305989.html
Copyright © 2011-2022 走看看