选择器
原文链接:https://note.noxussj.top/?sou…
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;
}
最全面的前端笔记来啦,蕴含了入门到入行的笔记,还反对实时成果预览。小伙伴们不须要在花工夫去写笔记,或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览,深色和浅色模式。
原文链接:https://note.noxussj.top/?sou…