前端面试题HTML+CSS基础篇——css选择器

css选择器

1. 什么是css选择器

CSS选择器用于选择你想要的元素的样式的模式。选择器不仅可以选择所有元素，也可以选择另一个元素内的所有元素。

2. css选择器都有哪些

• ID选择器：
  ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。
  ID选择器根据ID来选择，前面以“#”来标志。

#div{
  width:100px;
  height:100px;
}

• 类选择器

类选择器根据类名来选择，前面以“.”来标志。

.div{
  width:100px;
  height:100px;
}

• 标签选择器

标签选择器根据标签选择。

div{
  width:100px;
  height:100px;
}

会选择所有文档内所有div。

• 伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类选择器了。

div：hover{
  width:100px;
  height:100px;
}

• 伪元素选择器

所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器。

.div:first-child{
  width:100px;
  height:100px;
}

伪类和伪元素的区别：伪元素是表示真实存在的元素，而伪类不是真实存在的元素，比如after伪类，before伪类，active伪类，hover伪类等，伪元素有first-child，last-child，nth-child，nth-of-type，only-child等

• 通用选择器*

应用于所有文档

*{
  margin:0;
  padding:0;
  list-style:none;
}

3. css选择器的优先级和权重

同一元素引用了多个样式的时候，排在后面的样式属性优先级高
带有!import标记的样式属性的优先级最高
样式表来源不同时，优先级顺序为：内联>内部>外部>浏览器用户自定义样式>浏览器默认样式

权重：
内联：1000
ID选择器：100
类选择器/属性选择器/伪类选择器：10
标签选择器/伪元素选择器：1
通配符选择器(*):0