当前位置:首页 > 科技  > 软件

一篇文章带你了解 CSS 属性选择器

来源: 责编: 时间:2023-08-05 11:45:56 3148观看
导读属性选择器对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。一、了解属性选择器CSS属性选择器提供了一种简单而强大的方法,可以根据特定属性或属性值的存在

属性选择器对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。Hq528资讯网——每日最新资讯28at.com

Hq528资讯网——每日最新资讯28at.com

一、了解属性选择器

CSS属性选择器提供了一种简单而强大的方法,可以根据特定属性或属性值的存在将样式应用于HTML元素。Hq528资讯网——每日最新资讯28at.com

可以通过将属性(可选地带有值)放在一对方括号中来创建属性选择器。也可以在其前面放置一个[元素类型选择器。Hq528资讯网——每日最新资讯28at.com

二、CSS [attribute]选择器

这是属性选择器的最简单形式,如果给定的属性存在,则将样式规则应用于元素。例如,可以title使用以下样式规则来样式化所有具有属性的元素:Hq528资讯网——每日最新资讯28at.com

示例Hq528资讯网——每日最新资讯28at.com

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>CSS 属性选择器示例</title>        <style>            [title] {                color: blue;            }</style>    </head>    <body style="background-color: aqua;">        <h1 title="heading">属性选择器</ h1>            <p title="paragraph">此段落的颜色将为蓝色。</ p>    </body></html>

Hq528资讯网——每日最新资讯28at.com

[title]上例中的选择器匹配具有title属性的所有元素。Hq528资讯网——每日最新资讯28at.com

还可以通过将属性选择器放置在元素类型选择器之后,将选择范围限制为特定的HTML元素。Hq528资讯网——每日最新资讯28at.com

示例Hq528资讯网——每日最新资讯28at.com

<style>    abbr[title] {        color: red;}</style>

Hq528资讯网——每日最新资讯28at.com

选择器abbr[title]仅匹配具有title属性的元素,因此它匹配缩写,但不匹配具有属性的锚元素title。Hq528资讯网——每日最新资讯28at.com

1. CSS [attribute="value"]选择器

可以使用=运算符使属性选择器匹配属性值与给定值完全相等的任何元素:Hq528资讯网——每日最新资讯28at.com

示例Hq528资讯网——每日最新资讯28at.com

<style>    input[type="text"] {        border:1px solid red;    }    input[type="submit"] {        border:1px solid green;    }</style>

Hq528资讯网——每日最新资讯28at.com

解析:Hq528资讯网——每日最新资讯28at.com

上例中的选择器匹配[ input 具有type属性值等于的所有元素submit。Hq528资讯网——每日最新资讯28at.com

2. CSS [attribute〜="value"]选择器

可以使用~=运算符来使属性选择器与属性值是由空格分隔的值(例如class="alert warning")的列表的任何元素匹配,其中一个值等于指定的值:Hq528资讯网——每日最新资讯28at.com

示例Hq528资讯网——每日最新资讯28at.com

<style>    [class~="warning"] {        color: #fff;        background: red;    }</style>

Hq528资讯网——每日最新资讯28at.com

该选择器将任何具有class属性的HTML元素匹配,该属性包含以空格分隔的值,其中一个为warning。例如,它具有类值的元素相匹配warning,alert warning等等。Hq528资讯网——每日最新资讯28at.com

3. CSS [attribute |="value"]选择器

可以使用|=运算符使属性选择器与属性具有以指定的值开头的连字符分隔的值列表的任何元素匹配:Hq528资讯网——每日最新资讯28at.com

示例Hq528资讯网——每日最新资讯28at.com

<style>    p[lang|=en] {        color: #fff;        background: blue;    }</style>

Hq528资讯网——每日最新资讯28at.com

解析:Hq528资讯网——每日最新资讯28at.com

上例中的选择器匹配具有lang属性的所有元素,该属性包含以开头的值en,无论该值后面是否带有连字符和更多字符。换句话说,它的元素相匹配lang具有价值属性en,en-US,en-GB等,而不能为US-en,GB-en。Hq528资讯网——每日最新资讯28at.com

4. CSS [attribute ^="value"]选择器

可以使用^=运算符使属性选择器与属性值以指定值开头的任何元素匹配。它不必是一个完整的词。Hq528资讯网——每日最新资讯28at.com

示例Hq528资讯网——每日最新资讯28at.com

<style>            a[href^="http://"] {                background:url(img/border.png) 100% 50% no-repeat;                padding-right: 15px;            }</style>

Hq528资讯网——每日最新资讯28at.com

上例中的选择器将定位所有外部链接并添加一个小图标,指示它们将在新的选项卡或窗口中打开。Hq528资讯网——每日最新资讯28at.com

5. CSS [attribute *="value"]选择器

可以使用*=运算符使属性选择器匹配其属性值包含指定值的所有元素。Hq528资讯网——每日最新资讯28at.com

示例Hq528资讯网——每日最新资讯28at.com

<style>    [class*="warning"] {        color: #fff;        background: red;    }</style>

注:Hq528资讯网——每日最新资讯28at.com

上例中的此选择器将所有HTML元素与classvalue包含的属性进行匹配warning。Hq528资讯网——每日最新资讯28at.com

例如,它的元素相匹配具有类值warning,alert warning,alert-warning或alert_warning等。Hq528资讯网——每日最新资讯28at.com

三、使用属性选择器样式化表单

属性选择器对于不带class或的样式样式特别有用id:Hq528资讯网——每日最新资讯28at.com

示例Hq528资讯网——每日最新资讯28at.com

input[type="text"], input[type="password"] {    width: 150px;    display: block;    margin-bottom: 10px;    background: yellow;}input[type="submit"] {    padding: 2px 10px;    border: 1px solid #804040;    background: #ff8040;}

Hq528资讯网——每日最新资讯28at.com

四、总结

本文基于CSS基础,讲解了CSS 属性选择器,了解属性选择器的含义,对一些常见的属性通过案例进行详细的讲解。最后通过一个小项目,样式化表单,进一步的加深理解。Hq528资讯网——每日最新资讯28at.com

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。Hq528资讯网——每日最新资讯28at.com

代码很简单,希望对你学习有帮助。Hq528资讯网——每日最新资讯28at.com

本文链接://www.dmpip.com//www.dmpip.com/showinfo-26-137-0.html一篇文章带你了解 CSS 属性选择器

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 19个 JavaScript 单行代码技巧,让你看起来像个专业人士

下一篇: 使用LLM插件从命令行访问Llama 2

标签:
  • 热门焦点
Top
Baidu
map