CSS3-::section选择器、::placeholder选择器的用法说明

偏执的太偏执、 2023-08-17 17:04 95阅读 0赞

#### ::section 选择器 ####

`::selection` 选择器用于设置匹配元素中被用户选中或处于高亮状态的部分；::selection 只能设置少数的CSS属性：color、 background、cursor、和 outline

p { 
    	width: 300px;
    	border: 1px solid gray;
    }
    
    p::selection { 
    	color: red;
    	background: yellow;
    }

<p>
    	这是一段文本，选中看效果。这是一段文本，选中看效果。这是一段文本，选中看效果。
    	这是一段文本，选中看效果。这是一段文本，选中看效果。这是一段文本，选中看效果。
    </p>

![在这里插入图片描述][20190930103248879.gif]

#### ::placeholder 选择器 ####

`::placeholer` 选择器于控制表单输入框占位符的外观，默认的文字占位符为浅灰色

需要注意的是：除了Firefox是 **::\[prefix\]placeholder**，其他浏览器都是使用 **::\[prefix\]input-placeholder**

*  `[prefix]`
    
     *  `-webkit-` Chrome 浏览器、苹果浏览器
     *  `-moz-` Firefox 火狐浏览器
     *  `-ms-` IE 浏览器
     *  `-o-` 欧鹏浏览器

![在这里插入图片描述][20190930104039647.png]

input::-webkit-input-placeholder{ 
    	font-size: 5px;
    	color: red;
    }

![在这里插入图片描述][20190930104832947.png]

[20190930103248879.gif]: /images/20230808/5b73ccef0c284df78bbeff3a84943fc4.png
[20190930104039647.png]: /images/20230808/569e9e4fda1b4072a2f9b4a865abdf26.png
[20190930104832947.png]: /images/20230808/15b7ed3f443a4a13a77335d425076799.png

CSS3-::section选择器、::placeholder选择器的用法说明

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS选择器的常见用法(标签选择器,class选择器,id选择器,复合选择器,通配符选择器)

相关 CSS3-::section选择器、::placeholder选择器的用法说明

相关 CSS-高级选择器，后代选择器、交集选择器、并集选择器，伪类选择器的用法详解

相关 CSS-基础选择器，标签选择器、id 选择器、类选择器、通配符 *的用法详解

相关 css选择器_CSS选择器

相关 css 属性选择器_CSS选择器：属性选择器

相关 CSS3 选择器——属性选择器

相关 CSS3 选择器——伪类选择器

相关 CSS3 选择器——基本选择器

相关 CSS3 选择器的用法总结