选择器详解

选择器分类

基本选择器

• 元素选择器（标签选择器）
• 类选择器
• 唯一（ID标识）选择器
• 通配选择器

属性选择器

• E[attr]
  • 选中具有该属性的元素。
• E[attr=value]
  • 选中该属性值为 value 的元素。
• E[attr~=value]
  • 选中该属性值包含 value 值的元素。
• E[attr|=value]
  • 选中该属性值为 value 或者值为 value- 开头的元素。
• E[attr^=value]
  • 选中该属性值以 value 字符开头的元素。
• E[attr$=value]
  • 选中该属性值以 value 字符结尾的元素。
• E[attr*=value]
  • 选中该属性值中包含 value 字符的元素。

组合选择器

• E E 后代选择器
• E>E 子代选择器
• E~E 兄弟选择器
• E+E 相邻兄弟选择器

群组选择器

• E,E,...

伪类选择器

• E:link
  • 表示 a 元素未被点击的状态。
• E:visited
  • 表示 a 元素被访问过的状态。
• E:hover
  • 表示元素被鼠标在其上方悬浮时的状态，该伪类必须放在 link 与 visited 后面。
• E:active
  • 表示 a 元素被点击但鼠标按键未被抬起时的状态，该伪类必须放在 hover 后面。
• E:focus
  • 表示获取焦点的可输入组件。
• E:enabled
  • 表示可用的表单元素。
• E:disabled
  • 表示被禁用的表单元素，声明性属性，值为本身。
• 例如： <input type="text" disabled></input>
• E:checked
  • 表示已被勾选的 radio 复选或者 checkbox 单选元素。
• E:required
  • 表示被标记为必填项的可输入组件。
• E:read-write
  • 表示非只读的可输入组件。
• E:read-only
  • 表示只读的可输入组件。
• E:root
  • 选中标签的根元素，即 html。
• E:nth-child(n)
  • 当元素为父元素的第 n 个子元素时被选中。
• E:nth-last-child(n)
  • 与 nth-child 相同，但是方向相反。
• E:first-child
  • 当元素为父级元素第一个子元素时被选中。（E:nth-child(1)）
• E:last-child
  • 当元素为父级元素的最后一个子元素时被选中。(E:nth-last-child(1))
• E:nth-of-type(n)
  • 当元素为父级下第 n 个同类子元素时被选中。
• E:nth-last-of-type(n)
  • 与 nth-of-type 相同，但是方向相反。
• E:first-of-type
  • 为 nth-of-type(1) 简写形式。
• E:last-of-type
  • 为 nth-last-of-type(1) 简写形式。
• E:only-child
  • 当元素为父级元素的唯一子元素时被选中。
• E:only-of-type
  • 当元素为父级元素下唯一的同类子元素时被选中。当前元素为父级元素内唯一的e标签
• E:empty
  • 当元素不包含任何子元素时被选中，文本节点也被视为子元素。没有任何子集（包括空格 / 回车都是子元素）
• E:lang(c)
  • 当元素的 lang 属性值为 c 时被选中。任何标签都可以使用，表示该标签文本的语言属性
• E:not(selector)
  • 当元素与 selector 不匹配时被选中。
• E:target
  • 当元素被锚点激活时被选中。
• a标签的书写顺序：
  • a: link
  • a:visited
  • a:hover
  • a: active
• 声明性属性
  • readonly
  • readwrite
  • required
  • checked
  • disabled
  • read-write
  • read-only

案例

hver伪类

a:hover{	 color:red;   }	 	

**描述：**鼠标悬浮在元素上方时显示出的样式，临时为元素加了一个伪类，当满足条件时，激活该伪类

a: 表示被激活状态下的a标签

a:link{}	原始的样式

a:hover{}	鼠标指向该元素时，被激活的样式
#box:hover{}	同上

a:after{}
a:active{}	 被点击时

a:visited{}	被访问后的样式，历史记录是否有访问记录会影响样式

---

div伪类

<style>
	.face:nth-child(1){   }     所有face的元素父级元素中的第1个子元素
    .face:nth-child(2){   }     所有face的元素父级元素中的第2个子元素
    .face:nth-child(3){   }     所有face的元素父级元素中的第3个子元素
</style>
<div id="wrap">
            <div class="face">1</div>
            <div class="face">2</div>
            <div class="face">3</div>
</div>

伪元素选择器

• E::before

  • 向元素内部添加一个前置的子内容。

• E::after

  • 向元素内部添加一个后置的子内容。

• E::first-line

  • 向块元素内部的首行内容添加样式，但仅限于如下样式：
    • 所有和字体有关的属性。
    • 所有和背景有关的属性。
    • color， word-spacing， letter-spacing， text-decoration， line-height， text-shadow，vertical-align

• E::first-letter

  • 向元素内部的首个字母添加样式，但仅限于如下样式：
    • 所有的字体属性。
    • 所有的背景属性。
    • 所有的外边距属性。
    • 所有的内边距属性。
    • 所有的边框属性。
    • color，text-decoration， text-shadow，letter-spacing， word-spacing， line-height，box-shadow，float，vertical-align

• E::placeholder

  • 用于向元素内部的 placeholder 添加样式，但仅限于如下样式：
    • color
    • font-size
    • font-style
    • font-weight
    • letter-spacing
    • line-height
    • padding
    • text-align
    • text-decoration

• E::selection

  • 向该元素被高亮的部分添加样式，但仅限于如下样式：
    • color
    • background-color
    • cursor
    • caret-color
    • outline
    • text-decoration
    • text-shadow

选择器优先级

• 定义：选择定位某一个或者某一类元素（标签）
  通配选择器，全部样式，使用率小，*{}

• 文档与表现分离

  写在style标签中的样式，内部样式，例如：p{ color: red; }

  写在style属性中的样式，内联样式，例如：<p style="color: red;"></p>

  写在css属性中的样式，外部样式，class，例如.para{ color: red; }

  写在css属性中的样式，ID选择器，例如：#parp{ color: red; }

选择器类型	纬度（a,b,c,d）
行内样式、内联样式	1, 0, 0, 0
ID选择器	0, 1, 0, 0
class选择器、属性选择器、伪类选择器	0, 0, 1, 0
标签选择器、伪元素选择器	0, 0, 0, 1
通用元素选择器、伪类:not选择、默认样式	0, 0, 0, 0

计算规则：

1. 若有多个相同选择器，则权重相加

   例：#a #b{} 权重：2, 0, 0

2. 若有多个选择器同时出现，则按选择器的权重值逐位相加

   例： #a b 权重：1, 0, 1

   例：div#demo a 权重：0102

3. 只有一种情况权重分开计算，也称群组选择器

   例： #a, #b{} 权重分别为：1, 0, 0 1, 0, 0