css选择器都有哪些基本类型
说到CSS选择器，我们得先扒一扒最基本的三大类型，毕竟它们可是我们每天和样式打交道的主力军。第一种是标签选择器，顾名思义，就是直接用HTML标签名字来选中页面上所有这样的标签，比如p、div、span啥的。用标签选择器的时候，选中的可是所有该标签，不能区别某个个体，于是它适合设置一些共性的样式。比如：
p {
font-size: 14px;
}
这段代码就会作用于页面上所有的p标签。说白了，标签选择器就是帮你“一锅端”有点意思吧！
第二呢，是大家很喜欢用的id选择器，它用#开头，比如#header，专挑有着特别id的标签来设置样式。而且，页面中每个id是大写不能重复的，相当于给元素贴了个独特的身份证，方便我们精准定位。举个栗子：
#logo {
color: red;
}
这就只会让id是logo的元素颜色变红啦。
第三个呢，是class选择器，它的酷炫点在于用.开头，可以给一组元素统一套样式，class名可以重复用，超级灵活，像这样：
.box {
border: 1px solid #ccc;
}
这会让所有class叫box的元素都有边框，完美！
css选择器的继承和组合能有哪些方法 怎么使用这些选择器去继承样式与组合
其实啊，CSS选择器不仅仅就是选中元素那么简单，它们还能玩出花样，比如继承和组合。说白了，就是你给一个元素设了样式，会不会“传染”给里面的小伙伴，这就涉及继承性啦。
-
继承方面，有些CSS属性是能继承的，比如
color、font-size、font-family这些字体颜色和大小，很多内联元素都会悄悄继承这些样式，特别像visibility和cursor几乎所有元素都能继承。 -
组合选择器可劲儿来，比如我们常用的后代选择器，写法像：
div p {
color: blue;
}
这就表示所有div里的p标签字体是蓝色的，多好用啊！
- 还有子代选择器，写法像：
ul > li {
list-style-type: none;
}
意思是只选ul下一级的li元素，这样就不会误伤嵌套更深的列表项啦。
- 还有类和id的组合，比如：
#nav .active {
font-weight: bold;
}
这就表示id叫nav的元素下面，class叫active的子元素字体加粗，超级精准！
- 还有放心大胆用的标签选择器里的样式设置，例如：
a {
text-decoration: none;
color: black;
}
这样的标签选择器直接针对所有a标签，不用担心遗漏。
这么一来，你就明白了，选择器不仅是挑人帮你上色，还是帮你理清层级，搞定继承，实在是太酷炫了！
相关问题解答
-
css选择器有哪些常见类型?
哎呀，这个问题简单到爆，主要就是标签选择器、id选择器和class选择器。标签选择器是直接用标签名，id选择器用#加id名字，超级精准，class选择器用.加类名，特别灵活。它们是前端大咖们每天必用的“武器”，学会它们你css就入门了！ -
id选择器和class选择器有什么不同?
这事儿说白了就是“唯一”跟“多用”的区别。id选择器是给页面里唯一的元素用，想选哪个就贴哪个，绝对不会重复，像身份证；class选择器能给一群元素套相同的样式，想给好多元素穿同一套“衣服”，class就妥妥滴。用法和场景差别很大哦！ -
css样式是怎样继承的?所有样式都继承吗?
嘿嘿，不是所有样式都会传染给子元素啦，只有某些比如颜色、字体这些属于“可继承”的属性才能默默延续给里面的小伙伴。别的不继承，比如边框啥的就不会，这样才不会乱七八糟。要想让不继承的属性也传给子元素，有时候得手动去写，这得注意点儿。 -
组合选择器怎么用才能提高css效率?
恩，说白了就是多层选人招呼，干净又准！比方说你想选某个div里的所有p标签，用div p；想选直接子代用div > p；还可以组合id和class，比如#header .nav，只选某个大盒子里的导航元素。多练练各种组合，写出来的css大哥都说赞！
本文来自作者[崔心歆]投稿，不代表跃庆号立场，如若转载，请注明出处：https://www.mingcaifu.com/zhishi/202511-MqfMSRQBAAw.html
评论列表（3条）
我是跃庆号的签约作者“崔心歆”
本文概览：css选择器都有哪些基本类型 说到CSS选择器，我们得先扒一扒最基本的三大类型，毕竟它们可是我们每天和样式打交道的主力军。第一种是标签选择器，顾名思义，就是直接用HTML标签名...
文章不错《css选择器最常用类型 css选择器哪几种主要类型》内容很有帮助