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. Harbor的安装和基本使用

    Harbor是一个开源的云原生registry工程.Harbor对开源的Docker Distribution扩进行了扩展,支持registries之间镜像的复制功能,而且还提供了一些高级的安全方面的 ...

  2. 【视频开发】 ffmpeg支持的硬解码接口

    To enable DXVA2, use the --enable-dxva2 ffmpeg configure switch. To test decoding, use the following ...

  3. 【python开发】利用PIP3的时候出现的问题Fatal error in launcher: Unable to create process using '"'

    down voteaccepted I fixed my issue by... downloading Python 3 at the official website and installing ...

  4. web基础---->session的使用

    前几天在博问中,看到有人提到了有关session的问题,决定自己整理写一下有关session的原理!说起session,cookie必须是要谈的! 目录 Cookie的介绍 Cookie的使用 Ses ...

  5. openstack-keystone外组件命令行

    摘自openstack文档 镜像(glance) 列出您可以访问的镜像 $ openstack image list 删除指定的镜像 $ openstack image delete IMAGE 描述 ...

  6. Python Tkinter 文本框（Entry）

    Python Tkinter 文本框用来让用户输入一行文本字符串. 你如果需要输入多行文本,可以使用 Text 组件. 你如果需要显示一行或多行文本且不允许用户修改,你可以使用 Label 组件. 语 ...

  7. Windows快捷键大全

    每天在使用电脑,不会记点快捷键怎行?高效办公从快捷键开始! Windows 10 键盘快捷方式就是按键或按键组合,可提供一种替代方式来执行通常使用鼠标执行的操作. 其他键盘快捷方式 应用中的键盘快捷方 ...

  8. JVM之java并发 ——线程安全与锁优化

    概述 人们很难想象现实中的对象在一项工作进行期间,会被不停地中断和切换,对象的属性(数据)可能会在中断期间被修改和变“脏”,而这些事情在计算机世界中则是很正常的事情.有时候,良好的设计原则不得不向现实 ...

  9. MySQL多表查询答案

    一.综合练习 1.1 init.sql文件内容 /* 数据导入: Navicat Premium Data Transfer Source Server : localhost Source Serv ...

  10. json转义问题

    后端程序接受前台传递过来json 1正常json没有问题 比如  {"id":21,"userName":"2张天师","phon ...