首页 建站教程 WEB前端 正文

CSS选择指定类元素或根据属性选择通配元素

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来根据视觉设计稿定义网页的样式,还原设计稿使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于...

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来根据视觉设计稿定义网页的样式,还原设计稿使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化

常规的有CSS类选择器和ID选择器,本文主要介绍几种特殊的css选择方法,如css用选择器选取第几个元素,CSS通配(属性)选择器等。

一,css用选择器选取第几个元素

css选择器选取第几个元素的方法:1、使用“first-child”选择器选取属于其父元素的首个子元素;2、使用“last-child”选择列表中的最后一个标签;3、使用“nth-child(3)”选择第3个标签等等。

1、first-child
选择器用于选取属于其父元素的首个子元素的指定选择器。
选择li 列表中的 第一个li模块的背景颜色。

li:first-child{background:#F66}

2、last-child
表示选择列表中的最后一个标签,代码如下:

li:last-child{background:#F66}

3、nth-child(3)
表示选择第3个标签,代码如下:

li:nth-child(3){background:#F66}

上面代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。

4、nth-child(2n)
表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签。

li:nth-child(2n){background:#F66}

li:nth-child(even){background:#F66}

5、nth-child(2n-1)
表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签。

li:nth-child(2n-1){background:#F66}

   或

li:nth-child(odd){background:#F66}

6、nth-child(n+3)
表示选择列表中的标签从第3个开始到最后。

li:nth-child(n+3){background:#F66}

7、nth-child(-n+3)
表示选择列表中的标签从0到3,即小于3的标签。

li:nth-child(-n+3){background:#F66}

8、nth-last-child(3)
表示选择列表中的倒数第3个标签。

li:nth-last-child(3){background:#F66}

二,CSS根据属性选择通配元素

1,表示把包含标题(title)的所有元素变为红色

*[title] {color:red;}

表示只对有 href 属性的锚(a 元素)变为红色

a[href] {color:red;}

2,将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

a[href][title]{color:red;}

html代码示例

<h1>可以应用样式:</h1>
<a title="优美主题" href="https://www.umtheme.com">优美主题</a>

<h1>无法应用样式:</h1>
<a href="https://www.umtheme.com">优美主题</a>

3,根据具体属性值选择

a[href="https://www.umtheme.com"] {color: red;}

html代码示例

<h1>可以应用样式:</h1>
<a href="https://www.umtheme.com">优美主题</a>

<h1>无法应用样式:</h1>
<a href="https://umtheme.com">优美主题</a>

4,根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)
表示选择 class 属性中包含 umtheme 的元素设置为红色

p[class~="umtheme"]{color: red;}

如果没有波浪号,则说明需要完成完全值匹配
html代码示例

<h1>可以应用样式:</h1>
<p class="umtheme">优美主题</p>
<p class="umtheme">优美主题</p>
<h1>无法应用样式:</h1>
<p>优美主题</p>
<p class="um">优美主题</p>

5,子串匹配属性选择器

这里可以简单总结为以下这种类型

类型描述
[class^="um"]选择 class 属性值以 "um" 开头的所有元素
[class$="um"]选择 class 属性值以 "um" 结尾的所有元素
[class*="um"]选择 class 属性值中包含子串 "um" 的所有元素

表示类属性中包含um的所有元素变为红色

div[class*="um"] {color: red;}

html代码示例

<h1>可以应用样式:</h1>
<p class="themeum">优美主题</p>
<p class="umtheme">优美主题</p>
<p class="umhtml">优美主题</p>
<h1>无法应用样式:</h1>
<p>优美主题</p>
<p class="abc">优美主题</p>
打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:https://www.umtheme.com/web/203.html

相关推荐

JQuery实现div模拟select下拉列表

JQuery实现div模拟select下拉列表

对于前端开发者来说,应该都知道默认的select下拉列表比较难看,而且在各个浏览器中select下拉框呈现的默认样式都不一样,尤其是在ie浏览器中,要想把它定义成自己喜欢的样式,简直拿它没什么办法,c...
WEB前端 2022.07.01 0 195
JQuery触发单选radio或多选checkbox隐藏显示div

JQuery触发单选radio或多选checkbox隐藏显示div

需要达到的功能效果就是当点击radio或checkbox时,显示或隐藏某div,这个功能主要用于表单或后台功能配置项,在优美主题配置中也运用到,这样有利于提升用户体验,选择功能显示对应的功能配置。实现...
WEB前端 2022.06.30 3 277

js判断两个input输入框必须任填一个

在表单提交中,有时需要判断两种类型必填其一,如何判断两个input只能填写一个,如果填两个或两个都不填都出现alert验证提示。实现代码如下:<!DOCTYPE html>&...
WEB前端 2021.11.08 0 1002
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持