CSS3新增选择器：伪元素选择器

一、 ::first-letter 第一个字

二、 ::first-line 第一行（以浏览器为准的第一行）

三、 ::selection 被选中的字行（鼠标选中的字段）只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

<body><p>微软的 Internet Explorer(IE) 是当今最流行的因特网浏览器。它发布于 1995 年，并于 1998 年在使用人数上超过了 Netscape。Firefox 是由 Mozilla 发展而来的新式浏览器。它发布于 2004 年，并已成长为因特网上第二大最流行的浏览器。Opera 是挪威人发明的因特网浏览器。它以下列特性而闻名于世：快速小巧、符合工业标准、适用于多种操作系统。对于一系列小型设备诸如手机和掌上电脑来说，Opera 无疑是首选的浏览器。Chrome 是免费的开源 web 浏览器，它由 Google 开发。该浏览器于 2008 年 9 月发布。Chrome 4 是最新的谷歌浏览器Safari 是由苹果公司开发的浏览器，适用于 Mac 和 Windows 系统。该浏览器于 2003 年 6 月发布。</p>
</body>

<style>p::first-letter{/*第一个字母*/font-size:50px;}p::first-line{/*第一行（以浏览器为准的第一行）*/background:rgb(199, 24, 24);}/*被选中的字行（鼠标选中的字段）*/p::selection{background:#48ff00;}::-moz-selection{/*兼容*/background:#48ff00;}</style>

四、 ::before 和 ::after

1. 必须带一个属性content

2.在内部内容的前面或者后面插入内容

<div>必须带一个属性content</div>

div::before{content:"我是插入的内容";background:#572eb8;}

3.当插入的内容定义宽高和其他属性时，其实就是一个盒子（必须通过display转换，因为默认是一个行内元素）。

<body><div>盒子1</div>
</body>

div{width:500px;height:500px;border:1px solid #000;}div::before{content:"插入的盒子";display:block;width:200px;height:200px;background:rgb(211, 29, 29);}

4.上述可以解释清除浮动的后面两种方法，单伪元素法和双伪元素法（清除浮动的四种方法：额外标签法，overflow：hidden，单伪元素法和双伪元素法）

五、在字体图标里的运用，直接写入css里，不需要在HTML插入（之前的方法：字体图标）

发现一个很坑的问题：input不能使用伪元素（为什么input不支持伪元素(:after,:before)？）
示范一个搜索栏的做法，利用字体图标和伪元素，定位：

<body><inputtype="text"><span></span>
</body>

@font-face{font-family:'icomoon';src:url('fonts/icomoon.eot?vhnprv');src:url('fonts/icomoon.eot?vhnprv#iefix') format('embedded-       opentype'),url('fonts/icomoon.ttf?vhnprv') format('truetype'),url('fonts/icomoon.woff?vhnprv') format('woff'),url('fonts/icomoon.svg?vhnprv#icomoon') format('svg');font-weight:normal;font-style:normal;}span{position:relative;}span::after{content:"\e986";font-family:"icomoon";position:absolute;left:-20px;top:0;}

当然还有其他做法，比如直接在span里放入字体图标，然后定位，或者直接用背景图。

转载于:https://www.cnblogs.com/EricZLin/p/8857405.html

CSS3新增选择器：伪元素选择器相关推荐

CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器其他伪类选择器 1.结构性 ...
CSS3中的伪元素选择器与scss
以vue组件未例子来演示代码: <template><div>Practice<ul><li>面包屑一级导航</li><li>二 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
目录 1.属性选择器 2. 结构伪类选择器 nth-child(n) nth-of-type(n): nth-child和nth-of-type的区别 3. 伪元素选择器 1.属性选择器 E[att ...
css 选择器伪元素_CSS伪元素-解释选择器之前和之后
css 选择器伪元素选择器之前 (Before Selector) The CSS ::before selector can be used to insert content before t ...
css伪元素选择器，first-letter、first-line
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪元素选择器伪元素选择器,用于选择元素内的局部,包括first-letter.first-line等代码如下: p:firs ...
CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素
CSS3知识点: CSS3的相关属性不兼容低版本浏览器,IE9以下是不兼容的,在实际开发中要特别注意,移动端支持优于PC端,是在CSS2上新增的属性,关于兼容这里有两个名词需要了解: 渐进增强 :(针 ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
html5新增的伪类选择器有,CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）...
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢? 首先就是属性选择器,我们可以通过属性选择器 ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

CSS3新增选择器：伪元素选择器

CSS3新增选择器：伪元素选择器相关推荐

最新文章

热门文章