1. David Wu首页
  2. web前端
  3. CSS

网站建设CSS技术之属性选择器根据属性的给定值来定义属性样式

属性选择器允许您根据属性的存在或属性的给定值来定位项目。 /* Les éléments avec un attribut title */ a { color: purple; } /* Les éléments avec un href qui correspond */ /* à "https://ex WP网站建设

属性选择器允许您根据属性的存在或属性的给定值来定位项目。

/* Les éléments <a> avec un attribut title */
a[title] {
color: purple;
}</a>

/* Les éléments <a> avec un href qui correspond */
/* à "https://example.org" */
a[href="https://example.org"] {
color: green;
}</a>

/* Les éléments <a> dont href contient "example" */
a[href*="example"] {
font-size: 2em;
}</a>

/* Les éléments <a> dont href finit par ".org" */
a[href$=".org"] {
font-style: italic;
}</a>

[attr]
允许您定位具有属性的项目attr
[attr=valeur]
允许您定位具有属性attr且其属性值正好的元素valeur
[attr~=valeur]
允许您定位具有属性的元素,其属性attr值是由白色分隔的单词列表,其中一个是完全正确的valeur
[attr|=valeur]
允许您定位具有属性的元素,该属性attr的值为该属性valeur的值,或者其值valeur紧跟在连字符后面(U + 002D)。这可以特别用于与语言代码匹配。
[attr^=valeur]
允许您定位一个具有属性attr且其第一个值以开头的元素valeur
[attr$=valeur]
允许您定位具有属性attr且最后一个值以valeur。结尾的元素。
[attr*=valeur]
允许您定位具有属性attr且其值至少包含一个包含字符串的元素的元素valeur
[attr operateur valeur i]
可以在结束钩子之前添加一个  i(或I)。在这种情况下,将不考虑该情况(对于包含在ASCII间隔中的字符)。

示例

/* Tous les spans qui ont un attribut "lang"
seront en gras. */
span[lang] {font-weight:bold;}

/* Tous les spans qui sont en portugais seront
en vert */
span[lang="pt"] {color:green;}

/* Tous les spans en anglais américain sont bleus */
span[lang~="en-us"] {color: blue;}

/* Tous les spans en chinois seront en rouge, que
ce soit du chinois simplifié (zh-CN) ou
traditionnel (zh-TW) */
span[lang|="zh"] {color: red;}

/* Tous les liens internes auront un fond doré */
a[href^="#"] {background-color: gold;}

/* Tous les spans dont la première classe commence par "main"
auront un fond jaune. */
/* Les spans avec la classe class="banner main" ne seront
pas affectés. */
span[class^="main"] {background-color: yellow;}

/* Tous les liens dont les URL terminent par ".cn"
seront rouges */
a[href$=".cn"] {color: red;}

/* Tous les liens dont l'url contient "example"
auront un fond gris */
a[href*="example"] {background-color: #CCCCCC;}

/* Tous les champs email auront une bordure bleue */
/* Toutes les capitalisations de email fonctionneront
"email", "EMAIL", "eMaIL", etc. */
input[type="email" i] {border-color: blue;}

<div class="hello-example"><a href="http://example.com">English:</a>
<span lang="en-us en-gb en-au en-nz">Hello World!</span></div>
<div class="hello-example"><a href="#portuguese">Portuguese:</a>
<span lang="pt">Olá Mundo!</span></div>
<div class="hello-example"><a href="http://example.cn">Chinese (Simplified):</a>
<span lang="zh-CN">世界您好!</span></div>
<div class="hello-example"><a href="http://example.cn">Chinese (Traditional):</a>
<span lang="zh-TW">世界您好!</span></div>

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/11304

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注