CSS基础-选择器

基本选择器

• 元素
• 类 .
• ID #

---

 

标签属性选择器

属性标签选择器跟在元素选择器后，例 li [class = "a"]

• 匹配 带有名为attr的属性

[attr]

• 匹配 带有名为attr的属性的元素，其值为value。

[attr = value]

•  匹配 带有名为attr的属性的元素，其值可以为value，也可以为包含value（空格隔开）

[attr ~= value] 

• 匹配 带有名为attr的属性的元素，其值可以为value，或以value开头的字符串

[attr |= value]

 

 子字符串匹配选择器

选择器	描述
[attr ^= value]	匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
[attr $= value]	匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
[attr *= value]	匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。

大小写敏感

 默认属性匹配时是大小写敏感的，取消大小写敏感：在闭合括号前加 i ]

 li[class="a" i]

 

 

---

 

派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。上下文关系？

通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

 

 例如：使列表项的粗体样式 从标准变为斜体。并且该样式只作用于表项元素，不作用于其他元素。

li strong {
    font-style: italic;
    font-weight: normal;
  }

 

---

 

 伪类选择器

　　以冒号开头的关键字，用于选择处于特定状态的元素。

简单伪类

 : first-child   该元素的第一个子元素

: last-child  该元素的最后一个子元素

: only-child  没有任何兄弟元素的元素

 

 用户行为伪类

当用户以某种方式和文档交互的时候。

: hover  鼠标挪动到链接上时

: focus  使用键盘选定元素时

 

其他伪类 

参考https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

 

 

 伪元素

伪元素以双冒号：：开头。

伪元素和伪类选择器很像，但是不是向现有的元素中应用某个类，而是像加入全新的HTML元素一样。

:: first-line  第一行

:: before / ::after  与content属性结合

　　在元素前或者后插入一段文本字符串，但是不常用，对于一些屏幕阅读器来说，该文本不可见，而且对于别人查找和编辑也不方便。

　　也可以插入图标

.box::after {
content: " ➥"
}

　　也可以插入空字符串，然后用CSS改变它的外观和行为。

.box::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    border: 1px solid black;
}

 

 

 

结合伪类和伪元素

把第一段的第一行加粗

article  p  :first-child  :: first-line{   }

 

 

---

 

关系选择器

 后代选择器

以单个空格组合两个选择器，前一个是后一个的祖先元素，令第二个选择器匹配的元素被选择。

例如，h1 em 表示匹配h1中的em元素。

注意：后代选择器中两个元素的层次间隔可以是无限的。

 

子代关系选择器

以 大于符号＞ 组合两个选择器，这里的子代指的是前一个元素的直接子元素，更远的后代则不会被匹配。

例如， article p  匹配的是作为<article>的直接子元素<p>，而不会匹配其他 h1 h2等 

 

 邻接兄弟

以 加号 + 匹配紧邻前一个元素的后一个元素。

例如，p + img  匹配紧邻段落后的图片。

 

通用兄弟

以 约等号 ~  匹配某个元素之后的所有另一个元素，而不需要紧邻。

例如， p ~ img 匹配段落后的所有图片

 

关系选择器与其他选择器的组合

你可以以恰当的方式，将所学的选择器组合使用，找到目标文档中的一部分。

例如， h1 ~ a [href="https://"]  { }