元素选择器
元素选择器主要包括两类，一类是标签选择器，一类是通配符选择器。
# 元素选择器的级联语法
不同类型的 CSS 选择器的级联使用是非常常见的，如：
svg.icon {
vertical-align:-.25em;
}
1
2
3
2
3
元素选择器的级联语法和其他选择器的级联语法有两个明显的不同之处。
不能重复自身
类选择器、ID 选择器和属性值匹配选择器都可以重复自身，例如:
.foo.foo {} #foo#foo {} [foo][foo] {}1
2
3但是元素选择器不能重复自身：
foo*foo {} /*无效*/1因此，元素选择器无法像其他选择器那样通过重复自身提高优先级，但可以增加
body或html嵌套、:not()伪元素等方法提高优先级。必须写在最前面
input[type="radio"] {}/*有效*/ [type="radio"]input {}/*无效*/1
2
# 标签选择器二三事
标签选择器又叫类型选择器，它是一个相对比较简单的选择器，虽然不区分大小写但是建议使用主流的小写。
# 标签选择器混合其他选择器的优化
input[type="radio"] {}
a[href~="http"]{}
img[alt] {}
1
2
3
2
3
实际上上面例子里的标签是可以并推荐省略的，因为很多属性是某些标签元素所特有的。
div#cs-some-id {}
1
由于ID是唯一的，故没有理由在这种情况下使用div标签选择器。
# 标签选择器与自定义元素
对于现代浏览器，我们可以直接使用自定义元素的标签控制自定义元素的样式。
# 特殊的标签选择器:通配选择器
通配选择器是一个特殊的标签选择器，它可以指代所有类型的标签元素，包括自定义元素，以及<script>、<style>、<title>等元素，但是不包括伪元素。
当通配选择器和其他选择器级联使用的时候，星号都是可以省略的。
由于通配选择器 (*)匹配所有元素，因此它是比较消耗性能的一种 CSS 选择器，同时由于其影响甚广，容易出现一些意料之外的样式问题，因此请谨慎使用。
文章更新于: 2022/11/25 19:40:50