当前位置:首页 » php学习笔记 » css--属性选择器

css--属性选择器

原创 stpevenchow 62°c 2019年09月29日 22:28 php学习笔记 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

<html>
学习源码如下   

<head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <style type="text/css">
            [class]{
                color: pink;
            }
            [href="http://www.baidu.com"]{
                color: green;
                font-weight: bold;
            }
            [type^="t"]{
                color: red;
            }
            [type$="l"]{
                font-weight: bold;
            }
            [type*="a"]{
                color:pink;
                font-weight: bold;
            }
            [class~="div1"]{
                color: red;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
    <!--         属性以及属性值选择器
    1、属性选择器
    只有具有设定的属性,就会加载css样式,没有该属性的标签,添加该属性,也会照样执行css样式效果 -->
        <div class="">北京</div>
        <div>
            <span class="">上海</span>
        </div>
        <div>    
            <ul class="">
                <li>现在的辛苦</li>
                <li>只为了将来更好的生活</li>
                <li>以后好好敲代码</li>
                <li>好好的更新文章</li>
                <li>端正学习态度</li>
            </ul>    
        </div>
        <!-- 2、属性值选择器 匹配属性及属性值都必须符合要求     -->
        <a href="http://www.baidu.com">匹配符合要求</a>
        <br>
        <a href="https://www.baidu.com">匹配不符合要求</a>
        <!-- 属性值起始匹配选择器
        属性以及属性值符合设定需求即可        -->
        <br>
        <input  type="text" name="" value="起始匹配">
        <br>
        <!-- 属性值结尾匹配选择器,属性及属性值结尾部分符合要求即可 -->
        <input  type="url" name="" value="起始不匹配,结尾匹配">
        <br>
        <input  type="tel" name="" value="起始pip">
        <br>
        <input  type="html" name="" value="起始不匹配,结尾匹配">
        <br>
        <!-- 属性值模糊匹配选择器,属性及属性值任意部分符合要求即可 -->
        <input type="name" name="" value="属性值模糊匹配">
        <!-- 匹配多个属性值中的选择器,只要在一个或者多个属性值中,有完全符合设定的属性即可 -->
        <div class="div1">庆祝</div>
        <div class="div2">祖国</div>
        <div class="div1 div2">70</div>
        <div class="div3 div1">周年</div>
    </body>    
</html>

效果图展示

css属性选择器.png

欢迎阅读本文,如果本文对您有所帮助,记得收藏/转发☺

本文链接:http://stpeven.com/post/119.html

版权声明:本文为原创文章,版权归 stpevenchow 所有,欢迎分享本文,转载请保留出处!

本文标签:

三人行,必有我师

评论(0)

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读
11月25日

php--学习乘方运算,幂运算,哈希散列值,随机数

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 6次
php--学习乘方运算,幂运算,哈希散列值,随机数

<?php学习乘方运算,幂运算,哈希散列值,随机数1,乘方函数,幂函数pow()echo pow('2a', '3a');2的3次方也就是3个2相乘第二个参数,也就是乘方,此处可以为小数参数理论上应该是数字类型,如果是其它类型,会自动转化为数字类型2,求平方根函数sqrt()负数没有平方根,如果参数是负数,返回值为NAN, 表示不存在echo sqrt(9);3,求绝对值函数abs()正数的绝对是其本身,负数的绝对值是正数,0的绝对值是0echo abs(-...

标签 :
11月24日

php--变量检查2

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 7次
php--变量检查2

<?php1, 检查变量是否是null有3种判断方式is_null()isset()empty()首先先说is_null得判断范围1、未定义的变量 $var = '';var_dump(is_null($var));变量不存在,会报错,返回值为true    2、定义未赋值的变量     $int;var_dump(is_null($int));3、被销毁的变量4、赋值为null的变量 ...

标签 :
11月22日

php--变量检查

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 8次
php--变量检查

<?php// 特点:// 1,都只能有一个参数// 2,根据检查类型,符合的返回true,不符合返回false// 1,检查是否是整数 is_int()// 检查变量,如果存储数据为整数,返回true// 检查变量,如果存储数据不是整数,返回false$var = 'abc';var_dump(is_int($var));// 2,检查是否是浮点数 is_float()$var = 1000;var_dump(is_float($var));// 3,检查是否是数值 is...

标签 :
11月21日

php--常量

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 9次
php--常量

 <?php常量通过define()函数来自定义常量参数:1,定义得常量名称,需要时字符串格式2,定义得常量数值,数值必须是标量类型3,第三个参数,不使用如果需要对自定义常量进行数据修改,只能在第一次定义得define()函数中,对定义得数据进行修改define('rm', 15);echo rm;输出结果是15 $int = rmvar_dump($int);输出结果int(15)问题1,不能对常量进行赋值或者修改2,也不能对同一个自定义常量进行多次定...

标签 :
11月20日

php--其它类型转化为数字

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 9次
php--其它类型转化为数字

<?php/*其它类型转化为数字多出现于计算boolean true     1false    0字符串:从字符串左侧起,只转化符合数学形式的部分1, null --- 0*//*$int = 100 + null;echo $int; 输出结果为:1002、true ---1 false ---0*//*$int = 100 + true;echo $int; 输出结果101$int = 100 + false;ec...

标签 :