css基本选择器、复合选择器、伪类选择器

一、css代码书写方式:

1、头部:书写在style标签内。

<head>
    <style>
        css 代码段
    </style>
</head>

2、外链:将css代码写在外部css文件内,再使用link标签链接这个css文件。

<link rel="stylesheet" href="css文件地址">

3、行内:在标签内添加style属性,将css写在style属性里。

<tagName style="css代码段"></tagName>

二、四个基本选择器

1、统配选择器:匹配页面所有元素。

*{

}

2、标签选择器:匹配页面所有标签元素,会匹配多个同名标签元素。

标签名{

}

3、类选择器(99%):匹配页面具备相应class属性的元素,会匹配多个同名class属性名元素。

.类名{

}

4、id选择器:匹配页面具备id属性的元素,具有唯一性,只匹配第一个id名元素。

#id名{

}

三、复合选择器:基本选择器的进阶用法

1、子代选择器:匹配某个元素下的子元素,不会匹配孙子元素或者更低的元素。

选择器>选择器{

}

2、后代选择器:匹配某个元素的所有后代,包括子元素和孙元素及更后代的元素。

选择器 选择器{

}

3、群组选择器:匹配多个选择器,使用同一个样式。

选择器,选择器,...{

}

4、属性选择器:匹配某些属性,例如匹配有  name='名字'  属性的元素。

[属性="值"]{

}

值得注意的是,代码存在优先权,高优先权会覆盖低优先权样式

优先权:从小到大为

统配 < 标签 < 类选择器 < id选择器 < 行内样式 < important关键字

四、伪类选择器:搭配正常选择器使用,实现部分css特效。

1、捕获元素获取焦点时做某事,通常使用于输入标签

选择器:focus{

}

2、鼠标移入时做某事,通常使用于二级菜单与各种指向效果

选择器:hover{

}

3、选择第一个元素(指使用些伪类的选择器)

选择器:first-child{

}

4、选择最后 一个元素

选择器:last-child{

}

5、捕获批量元素中的某个元素,括号内可写数字,用以捕获第几个元素,也可写2n用来捕获2的倍数的元素,以此可以衍生出2n-1匹配奇数等用法。

选择器:nth-child(){

}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS伪类选择器是一种用于选择HTML元素的CSS选择器,它们不是基于元素的属性,而是基于元素在文档中的位置、状态或内容等特征进行选择。而CSS计数器是一种伪类选择器,它通过一个变量来设置,根据规则递增变量。可以用于为元素添加序号或计数器。下面是一些常见的CSS计数器伪类选择器: 1. :first-child:选择某个元素的第一个子元素。 2. :last-child:选择某个元素的最后一个子元素。 3. :nth-child():选择某个元素的一个或多个特定的子元素。 4. :nth-last-child():选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算。 5. :first-of-type:选择一个上级元素下的第一个同类子元素。 6. :last-of-type:选择一个上级元素的最后一个同类子元素。 7. :only-child:选择的元素是它的父元素的唯一一个子元素。 8. :only-of-type:选择一个元素是它的上级元素的唯一一个相同类型的子元素。 9. :nth-of-type():选择指定的元素。 10. :nth-last-of-type():选择指定的元素,从元素的最后一个开始计算。 CSS计数器可以通过设置变量和规则来实现元素的计数,可以用于为元素添加序号或计数器。例如,可以使用以下代码为每个元素添加一个计数器,并在每个元素前添加“Section <计数值>:”: ``` body { counter-reset: section; } .element:before { counter-increment: section; content: "Section " counter(section) ": "; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值