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. [LeetCode] 111. Minimum Depth of Binary Tree 二叉树的最小深度

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  2. sql 查找所有已经分配部门的员工

    查找所有已经分配部门的员工的last_name和first_nameCREATE TABLE `dept_emp` (`emp_no` int(11) NOT NULL,`dept_no` char( ...

  3. elementui禁用全选按钮

     document.getElementsByClassName('el-checkbox__input')[0].classList.add('is-disabled')           doc ...

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

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

  5. InfoGan笔记

    InfoGAN: Interpretable Representation Learning by Information Maximizing Generative Adversarial Nets ...

  6. 1. Spark SQL概述

    1.1 什么是Spark SQL Spark SQL是Spark用来处理结构化数据的一个模块,它提供了一个编程抽象叫做DataFrame并且作为分布式SQL查询引擎的作用 它是将Hive SQL转换成 ...

  7. 【scratch3.0教程】1.2 下载安装scratch

    第2课  下载安装Scratch 1 . 什么是Scratch?                                Scratch将程序语言设计成一块块积木,你只要用拖拉的方式,将程序积木 ...

  8. jquery 如何获取select 选中项的下一个选项的值

    <select> <option value="1" selected="selected">a</option> < ...

  9. Unity的学习笔记（向量点乘和叉乘）

    public class AngleTest : MonoBehaviour { public GameObject cube; //主要的物体 public GameObject radCube; ...

  10. Linux中su和sudo的用法整理

    一.为什么会有su和sudo命令? 主要是因为在实际工作当中需要在Linux不同用户之间进行切换.root用户权限最高很多时候需要root用户才能执行一些关键命令.所以需要临时切换为root用户.工作 ...