CSS 选择器

CSS 选择器用于定位我们想要给予样式的 HTML 元素。

简单选择器 Simple Selectors

元素选择器 Element Selectors

p {
  color: red;
}

div {
  color: blue;
}

ID 选择器 ID Selectors

<p id="notification">通知:明天放假</p>
#notification {
  font-size: 24px;
}

类选择器 Class Selectors

一个 CSS 类可以应用到多个不同的元素,一个元素也可以应用多个不同的 CSS 类

<ul>
  <li class="first done">起床</li>
  <li class="second done">刷牙</li>
  <li class="third">洗脸</li>
</ul>
.first {
  font-weight: bold;
}

.done {
  text-decoration: line-through;
}

通用选择器 Universal Selector

* {
  box-sizing: border-box;
}

.flex-container * {
  flex-basis: 100%;
}

属性选择器 Attribute Selectors

[attr]

[attr] 选择包含 attr 属性的所有元素,不论 attr 的值为何。

[disabled] {
  cursor: not-allowed;
}

[attr=val]

[attr=val] 仅选择 attr 属性被赋值为 val 的所有元素。

[data-color="gray"] {
  color: #ccc;
}

[attr~=val]

[attr~=val] 仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。

[attr*=val]

[attr*=val] 选择 attr 属性的值中包含字符串 val 的元素。

[title*="fuck"] {
  display: none;
}

[attr^=val]

[attr^=val] 选择 attr 属性的值以 val 开头(包括val)的元素。

[href^="http://"] {
  background-color: #f0ad4e;
}

[attr$=val]

[attr$=val] 选择 attr 属性的值以 val 结尾(包括val)的元素。

[src$="gif"] {
  border: 1px solid #ccc;
}

[attr|=val]

[attr|=val] 选择 attr 属性的值以 val(包括val)或 val-开头的元素(-用来处理语言编码)。

[lang|="zh"] {
  font-family: '微软雅黑';
}

伪类 Pseudo-classes

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
li:first-child { ... }
li:last-child { ... }
body :not(p) { ... }
p:not(.warning) { ... }

伪元素 Pseudo-elements

::after

::after

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}

::before

::before

.happy::before {
  content: '😁';
}

::selection

::selection 应用于文档中被用户高亮的部分(比如鼠标选中的部分)。

p::selection {
  color: white;
  background: blue;
}

::backdrop

::backdrop 实验特性

::first-letter

::first-letter 选中一整块文字第一行的第一个字母,当文字所处的行之前没有其他内容(如图片和内联的表格)。

::first-line

::first-line 将样式只应用于一个块状元素的首行。

::-webkit-input-placeholder

/* 设置 input 元素 placeholder 的字体颜色 */
input::-webkit-input-placeholder {
  color: #aaa;
}

组合选择器 Combinators

A, B

A, B 选中匹配 A 或/和 B 的元素

.author, .famous {
  font-weight: bold;
}
<h1>登鹳雀楼</h1>
<p class="author">王之涣<p>
<p class="normal">百日依山尽,黄河入海流。</p>
<p class="famous">欲穷千里目,更上一层楼。</p>

A B

A B 选中匹配 B 且为匹配 A 的元素的后代元素。

.article a {
  color: #384ebf;
}

A > B

A > B 选中匹配 B 且为匹配 A 的元素的直接子元素。

.warriors > li {
  background-image: url(../images/warrior.svg);
}
<ul class="warriors">
  <li><!-- ✅ -->
    斯蒂芬·库里
    <ul>
      <li>微博:<a href="http://weibo.com/u/3432945104">@StephenCurry</a></li>
      <li>Twitter: <a href="https://twitter.com/stephencurry30">@StephenCurry30</a></li>
    </ul>
  </li>
  <li>凯文·杜兰特</li><!-- ✅ -->
  <li>克莱·汤普森</li><!-- ✅ -->
  <li>德雷蒙德·格林</li><!-- ✅ -->
</ul>

A + B

A + B 选中匹配 B 且为匹配 A 的元素的下一相邻元素。

.cavs .lbj + li {
  text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
  <li class="lbj">勒布朗·詹姆斯</li>
  <li>凯里·欧文</li><!-- ✅ -->
  <li>凯文·乐福</li>
</ul>

A ~ B

A ~ B 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素。

.cavs .lbj ~ li {
  text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
  <li class="lbj">勒布朗·詹姆斯</li>
  <li>凯里·欧文</li><!-- ✅ -->
  <li>凯文·乐福</li><!-- ✅ -->
</ul>

🌰 正立方体各个面切换 https://twhy.github.io/fruit-cube

多个选择器 Multiple Selectors

.players .player.curry, .player.mvp, #lebron-james {
  background-image: url(../images/mvp.png);
}

参考链接

results matching ""

    No results matching ""