【css常用选择器】通配符选择器，标签选择器，类选择器，Id选择器...

酒仙李白

已于 2022-04-22 10:39:08 修改

阅读量6.8k

点赞数 5

文章标签： html

于 2022-04-20 22:46:44 首次发布

本文链接：https://blog.csdn.net/qq_65928317/article/details/124307317

版权

CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，我们一起来看看吧！

通配符选择器常用' * '号表示，他是所有选择器里作用范围最广的，能匹配页面中所有的元素。

基本语法格式： *{属性：属性值；}

例子

使用该选择器定义样式，清除所有HTML标记的默认边距。

*{
margin：0;        /* 定义外边距 */
padding：0;       /* 定义内边距 */
}

但是在实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。

标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。

基本语法格式：标签名{ 属性：属性值；}

所有的HTML标记名都可以作为标签选择器，例如：div, a, p, h1,span, 等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

例子

使用span选择器定义HTML页面中所有段落的样式。

span{
  font-size:20px;
  color:#222;
  font-family:"仿宋"； 
}

标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

类选择器使用‘ . ’(英文点号)进行标识，后面紧跟类名。

基本语法格式： .类名{ 属性：属性值；}

该语法中，类名为HTML元素的class属性值，大多数HTML元素都可以定义class属性。

例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=

关注