|
在 CSS 中，选取器是用于选取要设置样式的元素的模式。
Referencew3schools css selectorMDN css selector
class 选取器.className 选取所有 class="className" 的元素.className1.className2 选取所有 class="className1 className"的元素.className1 .className2 选取 class="className2"的所有元素, 并且该元素是 class="className1"的后代元素ID 选取器#myId 选取 id="myId"的元素* 选取器* 选取所有元素标签选取器p 选取所有 <p> 元素p.className 选取所有拥有 class="className"的<p>元素p,div 选取所有<p>,元素div p 选取所有在下面的<p>元素div > p 选取父元素是的所有<p>元素div + p 选取紧跟在后面的第1个<p>元素p ~ ul 选取前面有<p>元素的每一个<ul>元素属性选取器[href] 选取拥有 href 属性的所有元素[target="_black"] 选取 target="_black" 的所有元素[title~="flower"] 选取属性 title 包括 flower 的所有元素, 值为以空格分割的单个或多个字符[lang|="en"] 选取拥有 lang 属性, 并且以 en,en-起始的元素a[href^="https"] 选取 href 属性以 https 开头的每一个<a>元素a[href$=".pdf"] 选取 href 属性以.pdf 结尾的每一个元素a[href*="w3schools"] 选取 href 属性包括 w3schools 的每一个元素[title*="name" i] 匹配 title 属性值包括 name 的元素, 忽略体积写div[title][href^="https"] 组合运用
::before 和::after 这两个重点用来给元素的前面或后面插进内容，这两个常和"content"协同运用，运用的场景最多的便是清除浮动。
p:before {
content: ";
font-size: 2rem;
padding-right: 1rem;
}
p:after {
content: "(-_-)";
font-size: 2rem;
padding-left: 1rem;
}
<p>Lorem ipsum dolor sit.</p>
用来选取无任何内容的元素，这儿无内容指的是一点内容都无，哪怕是一个空格。
/* 隐匿空白的<p>元素 */
p {
min-height: 1rem;
bac 公斤round-color: orange;
}
p:empty {
display: none;
} 暗示选取父元素的第1个子元素的元素, 简单点理解便是选取元素中的第1个子元素, 记住是子元素, 而不是后代元素
ul li:first-child {
color: red;
}
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Consequuntur fuga iusto minus officiis!</li>
<li>Cumque facere illum laudantium quos.</li>
<li>At culpa eveniet placeat qui.</li>
</ul>
<a href="file:///C:/Users/buuug7/code/notes/css">与:fist-child类似，选取的是元素的最后一个子元素
用来定位某个父元素的
| 
发表于 2024-6-30 06:23:07