css3常见的四类选择器

157 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

通配符选择器

  • “*”表示的就是通配符,意思是:”所有的“。而在css中,可以使用*代表所有的标签和元素,这时就它就叫做通配符选择器。
  • * 会匹配所有元素,因此当你想要针对所有元素来设置的话可以用*来实现,如:设置所有元素的内外边距都为0
*{
 margin:0px;
 padding:0px
 }

标签选择器

标签选择器就是直接使用html自带标签作为选择器,在本页面所有的同种标签,都会被标签选择器选择。比如:

p{
color:green;
}
a{
text-decoration:none;
}

p和a这两个选择器会选择当前页面所有的 <p> 标签和 <a> 标签,并为其设置同样的属性。

id选择器和类选择器

类选择器使用格式(以menu为类名例):

<style>
.menu{
        属性
}
</style>
<body>
<div class="menu">
</div>
</body>
  • 类名称要以字母或下划线开头,名称可以重复。
  • 在一个标签中,也可以存在多个类名,如:<标签名 class="类名1 类名2 类名3……"> id选择器以#开头,后边是id名称,且id名称不可包含空格(类没有这个限制),id名称就是在标签中定义id属性,然后对应设置的属性值就是id名称。与类选择器类似。 举例:
<style>
#menu{
        属性
     }
</style>
<body>
<div id="menu">
</div>
</body>

id选择器优缺点: 优点就是,id使用的#选择器优先级高于类使用的.选择器,所以,当你想要提升优先级时,可以考虑使用id选择器。 缺点就是,在一个html文档中id选择器只能使用一次,而类可多次使用。

⚠️上述所说id选择器只能使用一次是指,一个html文档中同一id名称的id选择器只能出现一次,他不能像类选择器一样进行引用,只要id名称不同,随便创建几个都行。