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. js：如何获取select选中的值

    我想获取select选中的value,或者text,或者…… 比如这个: <select id="select">    <option value=" ...

  2. vxlan 跨网段虚拟机迁移

    一些服务器虚拟化软件可实现在两台虚拟化的物理服务器之间对虚拟机做动态迁移,迁移至另一中心的虚拟机不仅保留原有IP地址,而且还保持迁移前的运行状态(如TCP会话状态),所以必须将涉及虚拟机,迁移的物理服 ...

  3. EditPlus配置ftp连接linux

    选择文件/FTP下面的设置FTP服务器 1.点击添加 2.填写名称.ftp服务器.用户名.密码信息 3.点击高级设置 4.选择加密方式为sftp,端口22,如果不填端口号,默认也是22,确定 5.确定 ...

  4. Linux中进行jdk的安装+Tomcat安装+mysql的安装

    1.上传所需要的文件(这里事先准备好了jdk和tomcat的安装包,mysql需要在线安装) jdk的安装包名称:jdk-8u151-linux-x64.tar.gz tomcat 的安装包名称:ap ...

  5. Python基础学习：字符串认知与应用

    一.len()  家电维修 len:全写是length,是计算容量的函数:例如a="1234",len(a)=4 如果是中文字符,比如a="哈",len(a)= ...

  6. 40 多线程（十二）——ReentrantLock 可重入锁

    我们使用的synchronized加的锁是可以延续使用的,如下: public void test() { //第一次获得锁 synchronized(this) { while(true) { // ...

  7. gitlab 安装、备份与还原及常见设置

    gitlab 安装.备份与还原及常见设置 安装 安装过程比较简单,跑在 docker 上,执行命令即可 -v参数后面的值为卷的名称,自动创建数据卷(如果数据卷不存在) https://docs.git ...

  8. CentOS7 修改Jenkins以root用户运行

    修改Jenkins以root用户运行,这在正式环境中是不可取的,但在自己的测试环境中就无所谓了啦,怎么方便怎么来. 1. 修改Jenkins配置文件1.1 修改$JENKINS_USER打开jenki ...

  9. JSP 9大隐式对象和四个作用域的范围

    Java中 九大隐式对象说明 输入/输出对象:  request   response   out 作用域通信对象: session  application  pageContext Servlet ...

  10. 常用的MySQL命令

    1.新建数据库: create database person; 2.使用数据库 use person: 3.创建一个表格 create table student ( id int(10) not ...