CSS选择器都有哪些呢?
2023/4/14 0:22:01
本文主要是介绍CSS选择器都有哪些呢?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
选择器
css 选择器代表如何选中某个元素
现实生活举例
我们可以想象一个元素,其实就是一个人,那我该如何找到这个人呢?例如可以通过 id 选择器的方式,就像是通过身份证号码找到 TA。也可以通过标签选择器找到 TA,就像是通过喊 TA 的名字的方式。
类选择器
.my-content { color: #f00; }
id选择器
#my-content { color: #f00; }
标签选择器
div { color: #f00; }
属性选择器
div[name='myName'] { color: #f00; }
后代选择器
.my-content .box1 { color: #f00; }
子代选择器
.my-content > .box1 { color: #f00; }
相邻选择器
.my-content + .my-content2 { color: #f00; }
兄弟选择器
.my-content ~ .my-content2 { color: #f00; }
伪类选择器
/* 鼠标移入 */ .my-content:hover { color: #f00; } /* 鼠标按下 */ .my-content:active { color: #00f; } /* 元素禁用 */ .my-content:disabled { color: #888; } /* 在父元素中匹配第一个子元素 my-content */ .my-content:first-child { color: #f00; } /* 在父元素中匹配最后一个子元素 my-content */ .my-content:last-child { color: #f00; } /* 在父元素中匹配第n个子元素 my-content */ .my-content:nth-child(2) { color: #f00; } /* 在父元素中匹配倒数第n个子元素 my-content */ .my-content:nth-last-child(2) { color: #f00; }
伪元素选择器
/* 元素前面插入 */ .my-content::before { content: 'name1'; color: #f00; } /* 元素后面插入 */ .my-content::after { content: 'name2'; color: #00f; }
这篇关于CSS选择器都有哪些呢?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享