CSS基本选择器组合选择器伪类选择器大家好，今天在写代码的时候突然想到写CSS的常用的选择器。比如伪类选择器，并集选

大家好，今天在写代码的时候突然想到写CSS的常用的选择器。比如伪类选择器，并集选择器等等。当然后面开发的时候我们会用到类似于SCSS,Less这些CSS扩展库，但是对于新手，对于面试复习来说，还是可以将常用的总结来看一看的。希望对大家有所帮助。

基本选择器

基本选择器
元素选择器	直接使用 HTML 标签名,比如`span`,`div`,`h1`,`h2`等
类选择器	以点（.）开头,后面跟着自定义的类名.(也就是dom中class属性名)
ID选择器	以井号（#）开头，后面是自定义的 ID 名称.(也就是dom中id属性名)

面试中常问:选择器的权重问题

!important > 行内样式 > id选择器 > 类选择器(class) > 元素选择器(span,div..) > * > 继承 > 默认

组合选择器

交集选择器

特点：需要同时满足多个条件。简单来说，所选的选择器全部都得满足才能生效，与运算符 && 相似

写法：选择器之间连着，中间没有东西隔开

css.
// 此时，如果dom的id是text12，class属性是text11 才能应用此样式
#text12.text11{
  background-color: red;
  color: black;
}

并集选择器

特点：用于同时选择多个不同的元素。简单来说，所选的元素达到一个要求即可满足，与运算符 || 相似

写法：通过 ，逗号将各个选择器隔开

css.
// 此时，如果dom里的id是text01 或者 有class属性是text02 都应用此样式
#text01,.text02{
  margin-top: 2px;
  font-size: 20px;
  background-color: black;
  color: white;
}

后代选择器

特点：用于选择某元素的后代元素（包括子元素、孙元素等所有嵌套在其内部的元素）

写法：选择器直接加 空格

css.
// 此时, dom的class属性是text21且有子孙元素等,都会应用此样式
.text21 li{
  font-size: 20px;
  background-color: blue;
  color: brown;
}

子选择器

特点:只会选择指定元素的直接子元素,与后代选择器不同，它不会选择更深层次的后代元素。

写法:选择器中间加 > 大于号

css
// 下面的代码测试的是子选择器，上面的是后代选择器。后代选择器可以进行深层应用，子选择器是直接子元素
 /* 测试后代和子选择器的不同 */
.text21 div{
  font-size: 25px;
  color: brown;
}

.text21>div{
  background-color: black;
}

伪类选择器

链接类的伪类

链接类的伪类
:link	链接没有被访问过的样式
:visited	链接被访问过的样式
:hover	鼠标悬停在链接上的样式
:active	鼠标按下但是没有松开时候的样式

css.
// 测试使用的此伪类代码
#text41:link{
  color: red;
}
#text41:visited{
  color: blue;
}
#text42:hover{
  color: red;
}
#text42:active{
  background-color: chartreuse;
}

结构伪类

结构伪类(css3新特性)
:first - child	用于选择某个元素的第一个子元素.
`元素`:last - child	用于选择某个元素的最后一个子元素。
nth-child(number)	用于选择某个元素的第 number 个子元素。这里的 “number” 可以是一个数字、关键词或者表达式。
.....

注意:当使用:first-child :last-child,比如div:first-child{},此时如果第一个子元素不是div,不会去找下一个第一个,而是不能生效,:last-child也是如此

CSS基本选择器 组合选择器 伪类选择器