1. 首页
  2. CSS 菜鸟教程
  3. CSS - 伪元素 - ::part()

CSS - 伪元素 - ::part()

描述

CSS 中的伪元素 ::part（）用于表示影子树中具有相同 part 属性的元素;即伪元素 ::part（） 就像一个函数，并将该部分作为参数。

part 属性是一个全局属性，它表示元素的 part name 的空格分隔列表。这些部分名称允许使用伪元素 ::part（）选择和设置阴影树的特定元素的样式。

语法

selector::part(+) {
	 	 /* ... */
}

 

CSS ::part（） 示例

这是一个伪元素 ::part（）的例子。在此示例中：

  • 使用 JavaScript （new-widget） 创建模板。
  • 将模板的一部分声明为 widget。
  • 将 'widget' 作为参数传递给伪元素 ::part（），其中指定了 CSS 样式。
  • 由于部件（小组件）包含 <p> 标签，因此 CSS 样式将应用于此 <p> 标签。
<html>	
<head>
<style>
	 	.container {
	 	 	 max-width: 500px;
	 	 	 margin: 0 auto;
	 	 	 padding: 2em;
	 	}

	 	body {
	 	 	 font: 1em/1.618 Segoe UI, sans-serif;
	 	}

	 	new-widget::part(widget) {
	 	 	 max-width: 300px;
	 	 	 padding: 1em;
	 	 	 background-color: lightgoldenrodyellow;
	 	 	 border-radius: 20%;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <p>This paragraph is rendered as normal without any style.</p>
	 	 	 <template id="new-widget">
	 	 	 	 	<div part="widget">
	 	 	 	 	<p>This paragraph is rendered as a part of the main paragraph and thus the ::part() pseudo-element is applied here.</p>
	 	 	 	 	</div>
	 	 	 	 	</template>
	 	 	 <new-widget></new-widget>
	 	 	 <script>
	 	 	 	 	let template = document.querySelector("#new-widget");
	 	 	 	 	globalThis.customElements.define(
	 	 	 	 	template.id,
	 	 	 	 	class extends HTMLElement {
	 	 	 	 	constructor() {
	 	 	 	 	super()
	 	 	 	 	.attachShadow({ mode: "open" })
	 	 	 	 	.append(template.content);
	 	 	 	 	}
	 	 	 	 	}
	 	 	 	 	);
	 	 	 </script> 	 	 		
	 	</div>
</body>
</html>
<< CSS - @namespace CSS - @counter-styles >>