选择器

选择器

选择器

• 一种 html 元素的匹配模式;
• 告诉浏览器应将 css 规则应用于那些 html 元素;

css 选择器的读取顺序

• 从右向左;

元素选择器

• 直接匹配 html 元素;

a {
  color: red;
}

通用选择器

• 匹配所有 html 元素;

/* Selects all elements */
* {
  color: green;
}

*.warning {
  color: red;
}

选择器列表

• 将一个 css 规则;
• 应用于多个 html 元素;

h1,
.special {
  color: blue;

class 和 id 选择器

class 选择器

• 应用于所有元素;
• 应用于某一元素;
• 应用于具有多个 class 的元素;

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

id 选择器

id 选择器

#demo {
  border: red 2px solid;
}

结合元素选择器

li#demo {
  border: red 2px solid;
}

属性选择器

属性选择器

• [attr]: 匹配具有 attr 属性的元素;
• [attr=value]: 匹配 attr 属性值为 value 的元素;
• [attr~=value]: 匹配 attr 属性值列表中有 value 的元素;
• [attr|=value]: 匹配 attr 属性值以 value 开头或值为 value 的元素;
• [attr^=value]: 匹配 attr 属性值以 value 开头的元素;
• [attr$=value]: 匹配 attr 属性值以 value 结尾的元素;
• [attr*=value]: 匹配 attr 属性值中具有 value 子串的元素;

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

同时使用多个属性选择器

/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
  color: green;
}

选择器操作符

后代选择器

• 匹配元素为 li;
• 且 ancestor element 为 ul.my-things 的元素;

ul.my-things li {
  margin: 2em;
}

子代选择器

• 匹配元素为 li;
• 且为 ul.my-things 的 direct children elements 的元素;

ul.my-things > li {
  margin: 2em;
}

相邻兄弟选择器

• 匹配元素为 p;
• 且与 img 直接相邻的同级元素;

img + p {
  font-weight: bold;
}

通用兄弟选择器

• 匹配元素为 p;
• 且与 img 同级的元素;

img ~ p {
  color: red;
}

伪类

基本概念

• 定义 element 的特定状态;
• 如同 class 属性一般;

button:hover {
  color: blue;
}

伪类列表

• 伪类列表;

树结构伪类

element:nth-child()

• element: nth-child(values);
  • 匹配对应 element;
    • 匹配父元素正序第 value 个子元素;
    • 且该子元素为 element;
  • values;
    • even: 偶数;
    • odd: 奇数;
    • An + B: n 从 0 开始;

element:nth-last-child()

• element: nth-last-child(values);
  • 匹配对应 element;
    • 匹配父元素倒序第 value 个子元素;
    • 且该子元素为 element;
  • values;
    • even: 偶数;
    • odd: 奇数;
    • An + B: n 从 0 开始;

element:nth-of-type()

• element: nth-of-type(values);
  • 匹配对应 element;
    • 匹配父元素所有的 element;
    • 匹配这些 element 中的正序第 values 个元素;
  • values;
    • even: 偶数;
    • odd: 奇数;
    • An + B: n 从 0 开始;

element:nth-last-of-type()

• element: nth-last-of-type(values);
  • 匹配对应 element;
    • 匹配父元素所有的 element;
    • 匹配这些 element 中的倒序第 values 个元素;
  • values;
    • even: 偶数;
    • odd: 奇数;
    • An + B: n 从 0 开始;

element 前后使用选择器

• element 前使用选择器;
  • 寻找符合选择器的父元素;
  • 在对应父元素下匹配子元素;
• element 后使用选择器;
  • 在父元素下匹配子元素;
  • 且对应子元素符合选择器;

/* 首先寻找所有 class 属性值为 first 的元素
   然后匹配这些元素中第 2n + 1 个子元素
   且该子元素为 <span> */
.first span:nth-child(2n + 1) {
  background-color: lime;
}

/* 匹配父元素正序第 2n + 1 个子元素
   且该子元素为 <span>
   且该元素 class 属性值为 first */
span.first:nth-child(2n + 1) {
  background-color: lime;
}

伪元素

伪元素

• 定义 element 中的特定部分;
• 如同一个元素一般;

p::first-line {
  color: blue;
  text-transform: uppercase;
}

伪元素列表

• 伪元素列表;

常见伪元素

::after

• : : after;
  • 在指定元素最后一个子元素后创建一个伪元素;

::before

• : : before;
  • 在指定元素第一个子元素前创建一个伪元素;