CSS选择器

CSS选择器

CSS优先级

优先级是由 ABCD 的值来决定的

• 如果存在内联样式，那么 A = 1, 否则 A = 0;
• B 的值等于 ID选择器 出现的次数
• C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
• D 的值等于 标签选择器 和 伪元素 出现的总次数
• 通配符、子类选择器、兄弟选择器、如*, >, + 为0。

继承的样式没有权值
从左到右依次比较，如果A相同继续往下比较取较大值，如果A不同取A大的值。

伪类和伪元素的区别：是否创造了“新的元素”
伪类表示被选择元素的某种状态，例如:hover
伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如:before和:after

CSS选择器

常见选择器： 通配符选择器* 标签选择器标签名 类选择器.类名 ID选择器#id名

属性选择器

写法	描述
[attribute]	选择带有attribute属性的元素
[attribute=value]	选择 attribute=value 的所有元素
[attribute~=value]	选择选择 attribute 属性值包含单词 value 的所有元素(单词以空格为分隔符)
[attribute^=value]	选择 attribute 属性值以 value 开头的所有元素
[attribute$=value]	选择 attribute 属性值以 value 结束的所有元素
[attribute*=value]	选择 attribute属性中包含value子串的每个元素

文档结构选择器

选择器	描述
后代选择器 element element	选择 element 元素内部的所有 element 元素
子选择器 element1>element2	选择父元素为 element1 的所有 element2
相邻兄弟选择器 element1+element2	选择紧接在 element1元素之后的 element 2元素。
一般兄弟选择器 element1~element2	选择 element1 元素后面的每个 element2元素。

伪类选择器

除了a元素，:hover、:active也能用在其他元素上

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接
a:active 激活的链接（鼠标在链接上长按住未松开）

使用注意

• :hover 必须放在 :link 和 :visited后面才能完全生效；
• :active 必须放在 :hover 后面才能完全生效；
  所以建议的编写顺序是 :link、:visited、:hover、:active （LVHA）

结构伪类选择器

<div>
    <p>1</p>
    <span>2</span>
    <p>3</p>
    <span>4</span>
    <p>5</p>
    <span>6</span>
    <p>7</p>
    <span>8</span>
    <p>9</p>
    <span>10</span>
</div>

E表示子元素，它有父元素

• E:first-child 在E父元素的子元素中，选中第一个子元素，并且该子元素的类型需要是E
• E:last-child同E:first-child ，只不过选择的是最后一个子元素
• E:first-of-type 在父元素的子元素中，选中第一个E类型的元素
• E:last-of-type同E:first-of-type ，只不过选择的是最后一个子元素
• E:nth-child(m) 同E:first-child ，选择的元素是第m个元素，并且该元素的类型需要时E
• E:nth-of-type(m) 同E:first-of-type ，选中的元素是第m个元素
  • m可以取2n，表示第偶数个，n从0开始
  • m可以取2n+1(odd)，表示第偶数个，n从0开始
  • m可以取n，表示所有
• E:not(伪类选择器) 选择除了被伪类选择器选中的E元素

/* 类名不是 `.fancy` 的 
 元素*/
p:not(.fancy) {
  color: green;
}
body :not(p) {
  text-decoration: underline;
}

/* 既不是 
 也不是  的元素 */
body :not(div):not(span) {
  font-weight: bold;
}
/* 不是 
 或 `.fancy` 的元素*/
body :not(div, .fancy) {
  text-decoration: overline underline;
}
/* 
 元素中不是有 `.foo` 类名的  元素 */
h2 :not(span.foo) {
  color: red;
}