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. Python个人笔记

    目录 前言 查看Python以及第三方包安装位置 Python打包成exe 安装pyinstaller打包工具 打包 Python操作json 储存json 读取json 中文问题 倒计时关闭程序 P ...

  2. WIN7 浏览器 收藏夹栏字体太小

    在“窗口颜色和外观”-项目-“消息框”,把字体大小调大. "标题按钮" 大小 21.

  3. 微信小程序 与后台交互----获取服务器时间

    index.wxml代码 <!--index.wxml--> <view class="container"> <text>{{date}}&l ...

  4. python excel导入到数据库

    import xlrd import MySQLdb def inMySQL(file_name): wb = xlrd.open_workbook(file_name) sh = wb.sheet_ ...

  5. 面试必备的10道MySQL题

    MySQL 事务,是我们去面试中高级开发经常会被问到的问题,很多人虽然经常使用 MySQL,SQL 语句也写得很溜,但是面试的时候,被问到这些问题,总是不知从何说起.下面我们先来了解一下什么是 MyS ...

  6. Tomcat logs文件夹下不同文件的意义

      tomcat每次启动时,自动在logs目录下生产以下日志文件,按照日期自动备份   localhost.2016-07-05.txt   //经常用到的文件之一 ,程序异常没有被捕获的时候抛出的地 ...

  7. Spring Boot 项目中的 parent

    前言 我们成功创建Spring Boot之后,pom.xml坐标文件中都会有如下一段引用: <parent> <groupId>org.springframework.boot ...

  8. Django的Xadmin使用

    Django Xadmin 通常在实际的开发当中, 除了前后端分离的项目, 还有一些前后端不分离的项目, 这样我们在访问不分离的页面的时候, 就可以通过Django自带的admin管理模块来轻松实现后 ...

  9. IP核——RAM

    一.Quartus 1.打开Quartus ii,点击Tools---MegaWizard Plug-In Manager 2.弹出创建页面,选择Creat a new custom megafunc ...

  10. [POJ3682]King Arthur's Birthday Celebration[期望DP]

    也许更好的阅读体验 \(\mathcal{Description}\) 每天抛一个硬币,硬币正面朝上的几率是p,直到抛出k次正面为止结束,第\(i\)天抛硬币的花费为\(2i-1\),求出抛硬币的天数 ...