CSS属性选择器

简介: CSS选择器主要分为五大类:元素选择器,关系选择器,属性选择器,伪类选择器和伪元素选择器。平时用的最多的是元素选择器和关系选择器,而本文主要讲讲用得比较少的属性选择器。

CSS选择器主要分为五大类:元素选择器,关系选择器,属性选择器,伪类选择器和伪元素选择器。平时用的最多的是元素选择器和关系选择器,而本文主要讲讲用得比较少的属性选择器。

首先亮出本文通用的例子:

<!--html-->
<p name="zhangsan">张三(zhangsan)</p>
<p name="liusanjie">刘三姐(liusanjie)</p>
<p name="zhang-ming">张明(zhang-ming)</p>
<p name="lisan">黎三(lisan)</p>
<p name="sandy lisan">李三(sandy lisan)</p>
<p>无名氏</p>

接下来分别举例讲讲七大属性选择器。

一、E[att],筛选具有att属性的元素

css代码:

p[name]{ color: #f00;}

显示结果:


p[name]

可以看出,只要具有name属性的元素都会被筛选出来,而不具有name属性的“无名氏”颜色没有变化。

二、E[att="val"],筛选att属性值为val的元素

css代码:

p[name="lisan"]{ color: #f00;}

显示结果:


p[name="lisan"]

可以看出,只要name属性值为“lisan”的元素都会被筛选出来,而name属性为“sandy lisan”的元素并不会被筛选。

三、E[att~="val"],属性值为用空格分隔的字词列表,其中一个等于val的元素(包含只有一个值且该值等于val的情况)

css代码:

p[name~=lisan]{ color: #f00;}

显示结果:


p[name~=lisan]

可以看出,除了可以筛选出name属性值为“lisan”的元素,name属性值为“sandy lisan”的元素同样也会被筛选出来。

四、E[att^="val"],筛选att属性值以val开头的元素

css代码:

p[name^=zhang]{ color: #f00;}

显示结果:


p[name^=zhang]

可以看出,只要是name属性值以“zhang”开头的元素都会被筛选出来。

五、E[att$="val"],筛选att属性值以val结尾的元素

css代码:

p[name$=san]{ color: #f00;}

显示结果:


p[name$=san]

可以看出,只要是name属性值以“san”结尾的元素都会被筛选出来。

六、E[att*="val"],筛选att属性值中包含val的元素

css代码:

p[name*=san]{ color: #f00;}

显示结果:


p[name*=san]

可以看出,只要是name属性值中包含“san”的元素都会被筛选出来。

七、E[att|="val"],筛选att属性值以val开头并且其后紧跟着 “-” 的元素

css代码:

p[name|=zhang]{ color: #f00;}

显示结果:


image.png

可以看出,只要是name属性值以“zhang”开头并且其后紧跟着 “-” 的元素都会被筛选出来,所以只有“张明”颜色变红,而“张三”颜色不变。

兼容性:以上七个属性选择器均兼容主流浏览器,IE兼容到IE7,可以放心使用。

相关文章
|
4月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
42 0
|
4月前
|
前端开发
CSS属性
CSS属性
45 0
|
2月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
39 2
|
2月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
79 1
|
2月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
42 1
|
3月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
2月前
|
前端开发
css简写属性
css简写属性
37 0
|
3月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
27 0
|
3月前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
57 0
|
3月前
|
前端开发
哪些 CSS 属性可以继承?
哪些 CSS 属性可以继承?
69 0

热门文章

最新文章