CSS-选择器
CSS 选择器
2023-06-13 09:18:29 时间
原文链接:https://note.noxussj.top/?source=cloudtencent
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的四种基本选择器和四种高级选择器[通俗易懂]
- HTML+CSS 学成在线首页案例实操详解(超良心版!)
- 《简单记个笔记》之部分CSS选择器介绍
- 【说站】CSS如何绘制三角形
- 【说站】css中fraction如何使用
- 【说站】css中sticky属性有什么特点
- 【说站】css选择器是什么意思
- 【说站】css中类选择器的注意事项
- 【说站】css普通兄弟选择器如何理解
- table css样式_html table居中
- css基础选择器有哪些
- CSS 换行_css不允许换行
- css选择器学习网站
- css选择器选择奇数行或偶数行
- 怎么把网站变灰色,一段css即可
- css渐变实现杂色
- 【CSS教程】紫色渐变登陆布局html+css代码
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- 【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )
- CSS学习笔记02 CSS选择器详解编程语言
- JS动态引入js、CSS动态创建script/link/style标签详解编程语言
- The Shapes of CSS(css的形状)详解编程语言
- JS中的CSS选择器
- CSS选择器的优先级(精讲版)
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- CSS与MySQL合力提升网页性能(css与mysql结合)
- CSS中div、span和center元素
- 全面了解CSS
- 关于《精通css》之几个不错的注意事项
- 推荐彻底弄懂CSS盒子模式(DIV布局快速入门)
- dl,dt,dd制作的CSS垂直菜单
- 用javascript获得css中的属性值的代码
- CSShack实现CSS完美兼容IE6/IE7/FF的通用方法
- div+css与xhtml+css分别是什么意思?
- 批量修改标签css样式以input标签为例