html css选择器详解
2022年5月24日大约 3 分钟约 973 字
CSS常用的选择器
<html>
<head>
<!-- 通过https://cdn.bytedance.com渠道引入外部样式表 -->
<link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/css/bootstrap.css" type="text/css" rel="stylesheet" />
<style>
@import "media/style/custom.css"; /* 导入样式表 (必须放style标签头部)(这里css在html渲染后加载，会照成页面样式延迟从而影响体验，所以不建议这样引入) */
* { margin: 0; padding: 0;} /* 使用星号选择页面全部元素 */
h1 { color: red; } /* 标签选择器 */
#title { color: yellow; } /* id选择器 */
.content { color: blue; font-size: 16px; } /* 类选择器 */
h1, #title, .content { background-color: green; } /* 同时选择用逗号 */
.container .title { font-size; 20px; } /* 所有子元素选择用空格 */
.container > .title { border: 1px solid; } /* 直接子元素选择用右箭头 */
</style>
</head>
<body>
<h1>这是一个h1标签</h1>
<div class="container">
<p id="title">这是一个p标签，它的Id是title</p>
<p class="content">这是一个p标签，它的class是content</p>
</div>
</body>
</html>html标签内的id属性的名称在一个页面中有且只能一个，id名称同页面不可以重复，就像身份证号码一样唯一。
class名称在同一个页面可以随意重复，我们实战中通常使用class。
id属性和class属性的值都不要以数字开头！否则在火狐浏览器无效。
直接子元素选择是指仅查询嵌套的第一层标签，所有子元素选择是指查询所有内容，随便找把匹配的找出来。
可能用到的选择器
/* 匹配第3、6、9、12...个p元素 (可以替换成odd或even关键字匹配奇偶) */
p:nth-child(3n+0) { background: #ff0000; }
/* 匹配第一个p元素 */
p:first-child { color: red; }
/* 匹配最后一个p元素 */
p:last-child { color: red; }
/* 链接访问之前的样式 */
a:link { color: aqua; }
/* 链接访问之后的样式 (注意：:visited继承:link，且只能改变颜色属性) */
a:visited { color: red; }
/* 鼠标相关选择 */
h1:hover { color: red; } /* 鼠标悬停 */
h1:active { color: red: } /* 鼠标激活(点击按住不动) */
h1:focus { color: red; } /* 键盘光标聚焦(比如输入框获得焦点) */
/* 属性选择器 */
a[target] { color: red; } /* 带有指定属性的标签 */
a[target][title] { color:red; } /* 带有多个属性的标签 */
a[target="_blank"] { color: red; } /* 带有指定属性且等于指定值的标签 */
a[class~="container"] { color: red; } /* 带有指定属性且包含指定关键字的标签 */
[class^="top"] { color: red; } /* 带有指定属性且开头是指定关键字的标签 */
[class$="test"] { color: red; } /* 带有指定属性且结尾是指定关键字的标签 */选择器优先级权值
当样式冲突时，比如p{color: red;} p{color: yellow}这段代码，那页面实际效果中p标签的字体是红色还是黄色？
这个时候就要计算权重了！权重高的样式被使用！
不同样式引用方式和不同选择器的权重都不一样，以下是权重值展示：
| 权值 | |
|---|---|
| !important | 10000 |
| 行内样式 | 1000 |
| ID选择器 | 100 |
| 类选择器和伪类 | 10 |
| 标签选择器 | 1 |
| 通配符选择器 | 0 |
例如：#main div.warning h2 {...} 权值：100 + 1 + 10 + 1 = 112
CSS优先级口诀：
!important最重要- 行内很优先
- 权值其次
- 最后覆盖 （当权值一样时，后写的覆盖先写的）
不讨论
!important时，行内样式是最优先的；其次可以把外部样式表内容复制过来，只是与内部样式有先后顺序区别，再看选择器的权值高的优先；如果权值一样就是后面的顺序最优先，相当于覆盖。