选择器

选择器

选择器

• 一种 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 子串的元素；
• [attr operator value i]：大小写不敏感；

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:enabled

• 表示正在生效的表单控件；

element:disabled

• 表示已失效的表单控件；
• 与 disabled 属性相关；

element:read-only

• 表示只读状态的表单控件；
• 与 readonly 属性相关；

element:read-write

• 表示读写状态的表单控件；

element:default

• 表示为默认控件的表单控件；
• 默认控件机制；
  • 具有 selected 属性；
  • 具有 checked 属性；
  • 第一个 button 标签；

element:checked

• 表示被选中的 checkbox，radio 和 select 控件；

element:indeterminate

• 表示处于 indeterminate 状态的表单控件；
• 机制；
  • indeterminate 属性为 true；
  • 所有 name 属性相同的 radio/checkbox 都未选中；
  • progress 控件；

element:valid

• 表示表单控件验证成功；

element:invalid

• 表示表单控件验证失败；

element:in-range

• 根据 min/max 属性定义的范围；
• 表示 input 当前值在范围内；

element:out-of-range

• 根据 min/max 属性定义的范围；
• 表示 input 当前值在范围外；

element:required

• 表示具有 required 属性的 element；
• 用于 input 和 textarea 标签；

element:optional

• 表示没有 required 属性的 element；
• 用于 input 和 textarea 标签；

树结构伪类

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:link

• ：link;
  • 表示元素未被访问的状态;

element:visited

• ：visited;
  • 表示元素已被访问的状态;

element:hover

• ：hover;
  • 表示用户指针停留在元素的状态;

element:focus

• ：focus;
  • 表示元素为焦点的状态;

element:active

• ：active;
  • 表示元素被点击那一瞬间的状态;

以上伪类定义顺序

• ：link — ：visited — ：hover — ：active;

伪元素

伪元素

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

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

常见伪元素

::after

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

::before

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