前端面试题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

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页