标签选择器简介及用法

2024-07-16 21:15| 来源: 网络整理| 查看: 265

这里写目录标题什么是标签选择器？标签选择器的作用： ID选择器的作用：类选择器通过标签中的class属性来选择标签通配符后代选择器子代选择器交集选择器并集选择器序选择器相邻选择器兄弟选择器 nth-child选择器 nth-of-type(n) 伪类

什么是标签选择器？

通过标签名直接选择相应的标签。

不管有多复杂的嵌套关系，标签的位置就算藏的很深，依然可以被标签选择器命中。

格式：

标签名 {

声明：

}

标签选择器的作用：

利用标签选中所有的特性，进行默认样式的清除

复杂选择器中的一部分使用

ID选择器的作用：选中页面中唯一的标签。

格式：

#ID值{

声明：

}

#div2{ color: red; } #p1{ color: red; } id名称要填写相同 id名称只能在本网页中出现一次不能重复

【注】：

id值必须是唯一的，在一个页面中只能出现一次。如果出现重复的id值是不符合规范的所有标签都有id属性，id起名规范：字母、下划线、中划线、数字组成不能以数字开头。名字要带其含义，不要胡乱起名称。驼峰写法：SearchButton（大驼峰）searchButton（小驼峰，推荐写法）下划线写法：Search_button，多个单词，从第二个单词开始，每个单词的前面添加一条下划线。选择器尽量不要在css中使用，而是配合js使用。类选择器通过标签中的class属性来选择标签

格式：

.class值{ 声明： }

优点：可以选择一部分标签，设置相同的样式。

【注】

class值可以不唯一，类选择器选中的是拥有相同class值的标签元素一个标签可以拥有多个class值。命名规则与id相同类写样式，id写行为 .hobby{ color:rde font-size:15px } 两个类名相同调整样式两个都会生效通配符

*表示选中所有标签。（包含body，慎用）

使用场景：

清除默认样式。（现在已经不常使用，效率低，一刀切，所有标签都会执行一次代码） *{ margin:0 } body及以下的都会生效需要慎重使用

【本文地址】

公司简介

联系我们