选择器详解

选择器分类

基本选择器

元素选择器（标签选择器）
类选择器
唯一（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

计算规则：

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

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

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

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

例：div#demo a 权重：0102

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

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

选择器分类

基本选择器

属性选择器

组合选择器

群组选择器

伪类选择器

hver伪类

div伪类

伪元素选择器

选择器优先级

猜你喜欢