语言基础知识

对于CSS的大部分内容，你不需要特意去学习属性和值，你可以在需要时查找它们。然而，CSS中一些基础知识没有掌握好，你将很难去理解它。这些基础知识值得你花时间去理解，从长远看，它会帮你节省很多时间和少走弯路。

选择器，不仅仅有类

选择器的表现如标题所说的，它选择文档的某些部分，以便你可以将CSS规则应用于它。大多数人都熟悉使用 class，或在 直接使用HTML元素设置样式，比如 body，但是还有很多更高级的选择器可以根据文档中的位置选择元素，直接选择位于元素之后的元素，或选择表格中的奇数行。

这些选择器是CSS3规范的一部分（你可能听说过它们被称为第3级选择器）具有出色的浏览器支持。有关可以使用的各种选择器的详细信息，请参阅 MDN 参考。

有些选择器的行为就好像你已经将类应用于文档中的某些内容。例如p:first-child就像你在第一个p元素中添加了一个类一样，这些被称为 伪类选择器。伪元素选择器就像动态插入一个元素一样，例如::first-line的表现与用span 包裹第一行文本类似。但是，如果该行的长度发生变化，它将重新应用，如果插入该元素则不会出现这种情况。这些选择器可能会相当复杂。在下面的CodePen中是一个用伪类链接的伪元素的例子。我们使用:first-child伪类定位第一个p元素，然后::first-line选择器选择该元素的第一行，就好像在第一行周围添加了一个<span>以使其变为粗体和改变颜色。

<div class="container">
  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p></div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}* {box-sizing: border-box;}
p {
  margin: 0 0 1em 0;}.container {
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  column-count: 2;}.container p:first-child::first-line {
  font-weight: bold;
  color: rgb(111,41,97);}