分类 开发 下的文章

CSS伪类选择器:selection可以用来设置用户选择的文本样式,也就是当用户在页面上选择文本时,可以通过该选择器来定义选中文本的样式。

例如,我们可以使用:selection选择器设置选中文本的背景颜色和文本颜色:

::selection {
  background-color: blue;
  color: white;
}

这样当用户在页面上选中文本时,选中的文本就会显示为蓝色背景和白色文本。

需要注意的是,:selection选择器不能用于所有的CSS属性,只能用于部分属性,如background-colorcolortext-decorationtext-shadow等。而且不同浏览器对:selection的支持程度也有所不同,一些浏览器可能只支持部分属性。

text-transform是CSS中的一个属性,用于指定文本的大小写形式。常用的取值包括:

  1. none:默认值,不改变文本大小写形式。
  2. capitalize:将每个单词的首字母转换为大写。
  3. uppercase:将所有字母转换为大写。
  4. lowercase:将所有字母转换为小写。
  5. full-width:将所有字符转换为全角形式,一般用于中文排版。

使用示例:

p {
  text-transform: uppercase;
}

上述代码会将<p>元素中的所有文本转换为大写形式。

CSS伪类选择器 ::first-letter 用于选择一个元素中的第一个字母或第一个字符。

示例代码:

<p>::first-letter 伪元素示例</p>
p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: red;
}

上述代码将会选择 p 元素的第一个字符,并将其设置为2em的字体大小、粗体、红色文本。

注意事项:

  • ::first-letter 只能应用于块级元素中的第一个字母或字符,不能应用于非块级元素、inline元素或空元素。
  • ::first-letter 不能与其他伪元素(例如 ::before::after)同时使用。

CSS伪类选择器:has()允许你匹配具有指定子元素的元素。它类似于jQuery中的:has()选择器。但需要注意的是,CSS中的:has()选择器是实验性质的,可能会有变更或删除的风险。

:has()选择器的语法如下:

parent-selector:has(child-selector) {
  /* styles */
}

其中,parent-selector指定要选择的父元素,child-selector指定要选择的子元素。

例如,如果要选择所有具有子元素<a><li>元素,并将其文本颜色设置为红色,可以使用以下代码:

li:has(a) {
  color: red;
}

需要注意的是,由于:has()选择器是实验性的,不是所有浏览器都支持它。目前,只有少数浏览器(例如Firefox和Safari)支持:has()选择器。

focus-within 是一个 CSS 伪类选择器,它匹配包含某个元素的父元素,当该元素或其任何子元素获得焦点时,该选择器将生效。与 :focus 伪类选择器不同,:focus-within 选择器是基于父元素的状态而不是基于子元素的状态。

例如,以下代码片段中,当用户点击 input 元素时,它的父元素 div 元素会改变背景颜色:

<div class="container">
  <input type="text" placeholder="Enter text">
</div>
.container:focus-within {
  background-color: lightblue;
}

input 元素获得焦点时,div 元素的背景颜色将变为 lightblue

需要注意的是,:focus-within 伪类选择器的浏览器支持性不如其他选择器,例如 :hover:active