关于前端:CSS选择器都有哪些

选择器

原文链接：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...