CSS基础-选择器

2022-07-31 21:51:12

基本选择器

元素
类 .
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{   }