标签选择器

  • Post author:
  • Post category:其他

目录

1、通配选择器

2、类选择器

3、id选择器

4、后代选择器

5、群组选择器

6、子代选择器

7、优先级


1、通配选择器

/* 通配选择器 */
 * {
     margin: 0;
     padding: 0;
     list-style: none;
   }

选择所有的标签,一般设置网页格式化,margin、padding为0,清除盒模型及标签的默认间距。

2、类选择器

/* 类选择器 */
    .r1 {
        color: violet;
    }

选择类名为 class=”r1″的标签

3、id选择器

/* id选择器 */
#i1 {
        font-size: 30px;
    }

#id名 {},注意一个id名只能在html文件中出现一次。

4、后代选择器

div p {
        color: turquoise;
    }

选择父类中所有的子类标签,包括子类的子类,选择div中所有的p标签。

5、群组选择器

群组选择器
div span li a {
    list-style:none;
}

相同的标签具有相同的需求可以利用群组选择器。

6、子代选择器

/*子代选择器 */
    div>p {
        color: red;
    }

只选择父类的子类,与后代选择器不同,子代选择器只选取最近的子类标签,后代选择器包括子代选择器。

7、优先级

优先级 id (权重100)> class (权重10) > 标签 (权重1)


版权声明:本文为m0_56044262原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。