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>
    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    kubernetes概述
    pygame--图形模块
    iPhone 上你可能还不知道的小技巧
    使用 JdbcTemplate 查询数据时报错:列名无效(已解决)
    【分享】怎样做架构师?
    关于 oh-my-zsh 插件的使用(以 Sublime Text 为例)
    VI/VIM 无法使用系统剪贴板(clipboard)?(Ubuntu&Mac OS X已解决)
    Ubuntu 下 Sublime 无法输入中文?(已解决)
    VIM 的帮助文档在哪里?看这里。
    推荐一款好用的文件/文件夹对比工具 —— Beyond Compare
  • 原文地址:https://www.cnblogs.com/comefuture/p/8305989.html
Copyright © 2011-2022 走看看