iOS开发html+css学习之属性选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
为所有具有title属性的p元素,设置一个背景颜色为黄色
属性选择器
- 作用:可以根据元素中的属性或属性值来选取指定的元素
- 语法:
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取以指定内容开头的元素
[属性名$="属性值"] 选取以指定内容结尾的元素
[属性名*="属性值"] 选取以包含指定内容的元素
/
/
p[title] {
background-color: yellow;
} */

    /* 
        为title属性值是hello的元素设置一个背景颜色
     */
    /* p[title="hellc"] {
        background-color: red;
    } */

    /* 
        为title属性值以ab开头的元素设置一个背景颜色
     */
    /* p[title^="ab"] {
        background-color: red;
    } */

    /* 
        为title属性值以ab结尾的元素设置一个背景颜色
     */
    p[title$="ab"] {
        background-color: red;
    }

    p[title*="c"] {
        background-color: red;
    }

    </style>
</head>

<body>

<p title="我是title中的文字">我是一个段落</p>
<p>我是一个段落</p>
<p title="hellc">我是一个段落</p>
<p title="abddddab">我是一个段落</p>
<p title="abcsds">我是一个段落</p>
<p title="我是title中的文字">我是一个段落</p>
</body>
</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,142评论 0 3
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,822评论 0 0
  • 选择器 作用:告诉浏览器网页上的那些元素需要设置什么样的样式. 元素选择器 可以根据标签的名字来从页面中选取指定的...
    changzj阅读 2,773评论 0 0
  • 选择器 1、元素选择器作用:通过元素选择器可以选择页面中的所有指定元素语法:标签名{} 2、id选择器(对于id选...
    zy小太阳阅读 3,372评论 0 0
  • 转眼间就到了在江西待的第二天,清晨,在太阳刚刚升起的时候我们便出发去婺源。 经过了一两个小时的车程...
    小雨果儿阅读 3,624评论 1 1