标签选择器简介及用法

2023-12-28 00:59| 来源: 网络整理| 查看: 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及以下的都会生效需要慎重使用后代选择器

通过嵌套关系，来缩小选择范围，在范围内查找相关的元素。

格式：

选择器1 选择器2{

声明:

}

选择器1必须是选择器2的祖先元素。

IE 7开始兼容，IE 6不兼容

【注】

定义时，选择器之前使用空格隔开，空格左侧必须是右侧的祖先元素。

当要吧某些元素中的某些元素进行样式修改时，就要想要使用后代选择器。

p span{ background-color: rebeccapurple; } 这个可以选中这个不能选中祖先不是p标签这个也可以选中子代选择器

通过标签间的嵌套关系，来选中相应标签的子元素。

格式:

选择器1>选择器2{

声明：

}

【注】>符号的左右两边只能是父子关系

div>span{ background-color: rebeccapurple; } 不可以选中父级不是div 可以选中父级为div 不可以选中父级不是div 交集选择器

及满足条件1，又满足条件2.

格式：

选择器1选择器2{

声明：

}

【注】

交集选择器如果是标签选择器与类选择器的混写，则必须将标签选择器放在前面。

连续交集既满足条件1，又满足条件2，还满足条件3

span.nav.span1{ background-color: royalblue; } 可以选中，满足样式三个条件我是span标签2 （不能选中，不满足上方的条件）不能选中，缺少span属性并集选择器

多个选择器公用一个样式

格式

选择器1，选择器2，选择器3：{

声明：

}

h1,p,span{ color: royalblue; } 出塞秦时明月汉时关万里长征人未还但使龙城飞将在不教胡马度阴山都会发生变化序选择器

first-child：判断当前元素是否为父元素的第一个元素，如果是，则选中。

li:first-child{ background-color: pink; } 此行生效第二行第三行第四行

last-child：判断当前元素是否为父元素的最后一个子元素，如果是，则选中。

li:last-child{ background-color: pink; } 第一行第二行第三行此行生效

only-child：判断当前元素是否为父元素的唯一一个子元素，如果是，则选中。

li:only-child{ background-color: pink; } 唯一一个li标签所以生效，多个标签则不会生效相邻选择器

格式：

选择器1+选择器2{

声明

}

【注】选择紧贴在选择器1元素之后的选择器2元素，两者必须同属于一个父级。

h3+p{ background-color: pink; } 第一行第二行此行生效，必须与h3紧挨，如中间有别的标签进行隔断则不会生效第四行兄弟选择器

同属一个父级才会生效

格式：

选择器1~选择器2{

声明

}

【注】选中的是选择器1元素之后的所有同级的选择器2元素

h3~p{ background-color: pink; } 第一行第二行此行会被选中，与选择器必须是同级此行会被选中，与选择器必须是同级 nth-child选择器

格式：

n表示父元素下的第几个元素

E：nth-child（n）{

声明：

}

p:nth-child(2){ background-color: pink; } 第一行第二行,将会被选中第三行第四行 nth-of-type(n)

选中父元素下的同类型中的第n个元素

【注】

要使该属性生效，E必须是摸个元素的子元素，E的付元素最高可以是html

该选择器命中的是父元素中的第n个为E的子元素，不管第n个子元素是否为E

p:nth-of-type(2){ background-color: pink; } 第一行第二行此行生效，第二p标签生效，无论p真实在第几行第四行伪类

同一个标签，根据不同的状态，拥有不同的样式，这就叫做“伪类”。伪类使用：（冒号）来表示。

格式：

选择器：伪类名{

声明：

}

伪类选择器大致可以分为两种：

（1）静态伪类，只能用于超链接的样式。

：link 超链接点击之前

a:link{ color: royalblue; } 知乎

：visited 超链接被访问之后。

a:visited{ color: pink; } 知乎

（2）动态伪类针对所有标签适用

：hover “悬停” 鼠标放在标签上时呈现的效果

a:hover{ background-color: saddlebrown; } 知乎

：active “激活”鼠标点击标签时呈现的效果（不松手时）

a:active{ background-color: black; } 知乎

【注】

对于a标签有四种伪类，对应四种状态

：link 点击之前

：visited 点击之后

：hover 鼠标悬停

：active 激活鼠标点击时

顺序为:link visited hover active lvha (爱恨准则) lv = love ha = hate

a:link,a:visisted 一般都是可以省略的，简写在a标签中。一般只需要写a{}，a:hover{}

【本文地址】

公司简介

联系我们