CSS选择器大全包含nth-child和nth-of-type的区别

最新推荐文章于 2023-07-16 18:10:19 发布

萧景兴

最新推荐文章于 2023-07-16 18:10:19 发布

阅读量653

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_51145939/article/details/126358479

版权

详解nth-child和nth-of-type的区别和用法，简单易懂，包含基本选择器以及特殊选择器的解释以及用法

摘要由CSDN通过智能技术生成

哇~这里有最全的css选择器使用规则

要想将css样式应用于html标签，首先要找到该目标标签

在css中，执行这一样式规则的称为选择器

基础选择器

id选择器使用‘#’进行标识，后面紧跟html标签的id属性值

一张页面中的html标签的id属性值是唯一的

#mydiv {font-size:12px;color:red;}

页面启动后，该样式会应用在下面的标签元素上

<div id = 'mydiv'>id选择器</div>

类选择器使用英文标点'.'进行标识，后面紧跟html标签的class属性进行样式设计

它最大的优势在于可以同时设定相同样式的html标签，例如

.myclass {color:blue;}

该样式应用于下面的html标签

<div class = 'myclass'>类选择器</div>
<p class = 'myclass>段落</p>

限定式选择器由两个选择器构成

其中一个是标签选择器，另一个是类选择器或者id选择器，中间没有空格

中间是没有空格的，例如：

div#mydiv {...}//id属性为“mydiv”的div标签设置样式
p.myclass{...}//class属性为“myclass”的p标签设置样式

关注