CSS有哪些选择器，如何计算优先级？（一）

最新推荐文章于 2022-07-20 21:52:22 发布

白茶与风。°

最新推荐文章于 2022-07-20 21:52:22 发布

阅读量299

点赞数 1

分类专栏： Web前端文章标签： css html5 css3 html 前端

本文链接：https://blog.csdn.net/vens37/article/details/106460898

版权

5 篇文章 0 订阅

订阅专栏

前面介绍了HTML和CSS的概述及结构，大体了解到HTML用于描述页面的结，而CSS用于控制页面中元素的样式。那么，CSS是如何控制元素来添加相应的样式呢？

这就涉及到css里面选择器的规则了，CSS选择器主要的功能就是选中想要添加样式的元素，选择器就是用来匹配元素的，必须是要选中（书写正确）才可以给HTML页面中各种元素添加样式。

当然，有时候选择器也会涉及到继承、声明冲突可能会选不中，后面会详细介绍。

选择器最终选中的是离大括号最近的元素

注：命名规范

1、点号开始
2、包含字母、数字、下划线、连字符
3、点后面必须是字母 4、必须区分大小写

大驼峰命名法：每个单词的首字母大写
小驼峰命名法（推荐）：除了第一个单词，其他单词的首字母大写

结构伪类选择器
元素A:nth-child(n){声明块}
n是数值（从0开始递增）或公式
1· A也可以是类选择器，条件要满足第n个是A元素！！！
注：所有兄弟元素必须是相同标签
2· 选中第1个元素，元素A:first-child{声明块}
3· 选中最后一个元素，元素A:last-child{声明块}
4· 选中奇数项元素，元素A:nth-child(odd){声明块}
odd，奇数（2n+1） n起始值是0，自增1
5· 选中偶数项元素：元素A:nth-child(even){声明块}
even，偶数（2n）
选中第6个及以后的元素：n+6;
选中前3个，公式：-n+3
6· 选中指定标签的第n个元素，元素A：nth-of-type(n){声明块}
选中第1个指定类型的标签，元素A：first-of-type{声明块}
选中最后1个指定类型的标签，元素A：last-of-type{声明块}
倒数选中目标元素：元素A：nth:last-of-type{声明块}
元素A：nth:last-chlid{声明块}
7· 否定伪类选择器，元素A:not(:nth-child(n)){声明块}
否定两个元素：元素A:not(:nth-child(n)：not(:nth-child(n)){声明块}
8· 选中无兄弟元素的标签：元素A:only-child{声明块}
9· 选中没有元素内容的标签：元素A:empty{声明块}
注：空格也算元素内容（空格和回车）

:link 未访问
:hover 悬停
:active 点击
:visited 已访问
:focus 焦点、激活（键盘tab）
使用键盘进行页面的操作，输入框
书写顺序： link/visited(可换序，又叫静态伪类，仅适用于超链接)、hover、active
元素A：target{声明块}
跳转页面打开方式：target="_blank"(打开新页面) _self(默认值，当前页面)

还可以： 在html里面添加锚点和css里添加display:none;可以隐藏内容，点击时才出现

完。
更多资料请微信搜索公众号「夜来妖风起」第一时间阅读。
在这里插入图片描述

关注