css中5种属性选择器
2023-09-27 14:22:49 时间
属性选择器
语法:
[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
以下为演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 需求一:有title属性的p标签,颜色变为红色 */
/* p[title]{color: tomato;} */
/* [title=abc]{font-size: 30px;} */
/* [title^=ab]{color: blue;} */
/* [title$=ab]{color: turquoise;} */
[title*=c]{color: skyblue;}
</style>
</head>
<body>
<h1 title="a" >满江红·写怀</h1>
<h3 title="ab">岳飞·宋</h3>
<p>····</p>
<p title="abc">靖康耻,犹未雪。臣子恨,何时灭!</p>
<p title="abcdab">驾长车,踏破贺兰山缺。</p>
<p>壮志饥餐胡虏肉,笑谈渴饮匈奴血。</p>
<p>待从头、收拾旧山河,朝天阙。</p>
</body>
</html>
相关文章
- Session Cookie的HttpOnly和secure属性
- EntityFramework Core 2.1重新梳理系列属性映射(一)
- 小程序/CSS的font-weight属性
- jquery 属性操作 attr( ) prop()css( )区别
- Aspose.Words for .NET图表教程——如何设置图表轴属性
- 精通Android自定义View(五)自定义属性值使用详情
- CSS 属性选择器的深入挖掘
- 第104章 属性关键字 - MultiDimensional
- css元素定位:通过元素的标签或者元素的id、class属性定位
- CSS 温故而知新 background常用属性
- 【前端学习之HTML&CSS】-- CSS第四篇 -- 层叠、继承与属性值计算
- CSS背景background相关属性使用方法:
- Swift2.0语言教程之类的属性
- js 修改css属性值
- 子RelativeLayout与layout_alignParentBottom属性会撑大视图
- 《JavaScript启示录》——1.18 构造函数实例都拥有指向其构造函数的Constructor属性
- css中align-self属性是什么
- 线程属性总结 线程的api属性
- touch-action css属性 滚动和缩放手势
- 用css解决Unigui在IE系列浏览器中字体变小的问题(设置UniServeModule的customcss属性)
- 浅析CSS的属性选择器
- CSS3的content属性详解及CSS中content使用字体图标
- 【快应用】如何通过计算属性控制组件样式
- CSS outline 属性