HTML&CSS基础-属性选择器

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.html源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>属性选择器</title>

    </head>

    <style>

        /**

         * 属性选择器:

         *     作用:

         *         可以根据元素中的属性或属性值来选取指定元素

         *     常用语法:

         *         [属性名称]:

         *             选取含有指定属性的元素

         *         [属性名称="属性值"]:

         *             选取含有指定属性值的元素

         *         [属性名称^="属性值"]:

         *             选取属性值以指定内容开头的元素

         *         [属性名称$="属性值"]:

         *             选取属性值以指定内容结尾的元素

         *         [属性名称*="属性值"]:

         *             选取属性值包含指定内容的元素

         *

         *     其它语法,如下所示(发现上面常用的语法不够用时可以参考手册说明):

         *         [属性名称~="属性值"]

         *         [属性名称|="属性值"]

         */

        /**

         *     案例一:

         *         为所有具有title属性的p元素，设置一个背景颜色为黄色

         */

        p[title]{

            background-color: yellow;

        }

        /**

         *  案例二:

         *         为title属性值是hello的元素设置一个背景颜色为深紫色

         */

        p[title=world]{

            background-color: darkorchid;

        }

        /**

         *     案例三:

         *         为tiitle属性值以func开头的元素设置一个背景颜色为棕色

         */

        p[title^="func"]{

            background-color: brown;

        }

        /**

         *     案例四:

         *         为title属性值以f结尾的元素设置一个背景颜色为蓝色

         */

        p[title$="f"]{

            background-color: blue;

        }

        /**

         *    案例五:

         *         位titile属性值包含"s"的元素设置一个背景颜色为深粉红色

         */

        p[title*="s"]{

            background-color: deeppink;

        }

    </style>

    <body>

        <!--

            titile属性:

                这个属性可以给任何标签指定;

                当鼠标移动到元素上时，元素中的titile属性的值将会作为提示文字显示;

        -->

        <p title="hello">我是一个段落</p>

        <p >我是一个段落</p>

        <p title="scala">我是一个段落</p>

        <p >我是一个段落</p>

        <p title="func">我是一个段落</p>

        <p >我是一个段落</p>

        <p title="def">我是一个段落</p>

        <p >我是一个段落</p>

        <p >我是一个段落</p>

        <p title="function">我是一个段落</p>

        <p >我是一个段落</p>

        <p >我是一个段落</p>

        <p title="world">我是一个段落</p>

        <p >我是一个段落</p>

        <p >我是一个段落</p>

        <p title="hello">我是一个段落</p>

    </body>

</html>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-属性选择器的更多相关文章

  1. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. HTML&CSS基础-常用选择器

    HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  3. CSS基础和选择器

    什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...

  4. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  5. CSS基础及选择器

    CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部 ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  7. CSS 基础 优先级 选择器 继承

    1.样式优先级 (内联样式)Inline style     >    (内部样式)Internal style sheet     >     (外部样式)External style ...

  8. CSS笔记——属性选择器

    1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...

  9. CSS基础之选择器

    一:CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到,一个样式表时,就会按照. 二:CSS语法 每个CSS有两部分组成:选择器和声明 ...

随机推荐

  1. 【tensorflow基础】Tensorpack-API

    安装 pip install tensorpack 使用 参考 1. Tensorpack: 2. Tensorpack,一个基于TensorFlow的神经网络训练界面,源码包含很多示例: 完

  2. express 413 Request Entity Too Large解决办法

    1.配置nginx 原因是请求实体太长了.一般出现种情况是Post请求时Body内容Post的数据太大了 如上传大文件过大; 如POST数据比较多 处理方法修改nginx.conf的值就可以解决了. ...

  3. [LeetCode] 875. Koko Eating Bananas 可可吃香蕉

    Koko loves to eat bananas.  There are N piles of bananas, the i-th pile has piles[i] bananas.  The g ...

  4. NB-IOT技术学习问题记录

    1. TAU是什么,跟踪区更新 2. 小区和基站的区别 3. 附着和设备注册的关系? 4. 不携带PDN是什么意思? 5. PLMN 公共陆地移动网络,和小区的关系,区别?

  5. 如何杀死处于进程状态D的进程

    D状态的就是 uninterruptible sleep ,此时进程不能被信号唤醒,GDB等调试工具也不能对它调试,因为GDB也是用到了信号,也杀不死它 D状态的形成 如何分析D状态 cat /pro ...

  6. 博客迁移到github了

    博客迁移到github了,这边基本不更新, 主要是没有找到快捷的同步方法,手动同步太麻烦了,如果你有快速把github博客同步到博客园的方法请一定告诉我

  7. RDB和AOF持久化

    RDB和AOF持久化 https://www.cnblogs.com/Tu9oh0st/p/11229317.html Redis提供了不同的持久化选项: RDB持久化以指定的时间间隔保存那个时间点的 ...

  8. 微信小程序获取位置

    获取位置 getLocation wx.getLocation({ type: 'wgs84', success (res) { const latitude = res.latitude const ...

  9. 【剑指offer】面试题 31. 栈的压入、弹出序列

    面试题 31. 栈的压入.弹出序列 NowCoder LeetCode 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如 ...

  10. Fiddler抓包工具如何可以抓取HTTPS