专业做俄语网站建设司,东莞网站优化方法,百度h5怎么发布,设计网站策划书伪元素常常被误解为伪类#xff0c;主要在于他们的语法相似#xff0c;都是对于选择器功能的扩展#xff0c;相似程度很高导致被混淆。 本文通过详细介绍伪元素和常见的使用方法#xff0c;最后也会分析下伪元素与伪类的基本区别。 基本描述 CSS伪元素也是应用于选择器的…伪元素常常被误解为伪类主要在于他们的语法相似都是对于选择器功能的扩展相似程度很高导致被混淆。 本文通过详细介绍伪元素和常见的使用方法最后也会分析下伪元素与伪类的基本区别。 基本描述 CSS伪元素也是应用于选择器的关键字允许改变被选择元素的特定部分的样式。 一般常见的如用于在元素的内容前后插入新的内容或者改变首字母、首行的样式等。 语法selector:pseudo-element { property: value; }。 div::before {content: 开始-;color: red;font-size: 15px; }如上代码即是我们常用的 ::after 伪元素在div内部增加一块 开始- 的内容作为div的第一个子元素可以设置不同的样式属性。 常用伪元素 下面的列表列出当前可用的伪元素 伪元素描述::after作为选中元素的第一个子元素。::before作为选中元素的最后一个子元素。::first-letter选中块元素第一行的第一个字母应用样式。::first-line选中块元素的第一行应用样式。::selection应用于文档中被用户选中的部分如使用鼠标选中文本。::file-selector-button代表input(file)标签按钮用来改变该按钮样式。::marker应用于list-item元素上的标记点的样式。::slotted用于选定那些被放在HTML模板中的元素。::part应用于Web components中shadow-dom的任何匹配part属性的元素。 其中::before 和 ::after 应该是我们使用最多的伪元素而其他的伪元素也有各自的特点和作用下面通过一个示例来展示其中几个伪元素。 示例 div classprovincespan中国中部的省份/spanulli湖北/lili湖南/li/ulinput typefile / /div.province::first-letter {color: #f00;font-size: 20px; } .province::before {content: 选择 } ::selection {background-color: #ff0; } li::marker {color: #f00; } input::file-selector-button {border: 1px solid #f00;font-size: 20px;border-radius: 5px; }页面呈现如下图 以上代码使用了多个伪元素的实现 ::before 增加了一个文本内容 选择。::first-letter 改变了第一字的字体大小颜色变为红色并且是改变的 ::before 元素的文本因为 ::before 是第一行子元素的内容。::file-selector-button 改变了文件上传控件的按钮样式增加红色边框、圆角、字体大小。::marker 改变了列表元素每行前面的圆点为红色(默认是黑色)。::selection 当鼠标选中内容区域时背景色会变为黄色。 注意before伪元素作为第一个子元素会被first-letter选中赋予样式。 以后当我们想美化文件上传控件时伪元素 ::file-selector-button 也是一个可用的选择。 ::before 和 ::after 这两个伪元素是我们前端开发中最常用的本节专门详述它们的基本用法。 ::before 创建一个伪元素作为所选中元素的第一个子元素::after 创建一个伪元素作为所选中元素的最后一个子元素。 它俩通常展示一块文本内容并且需要使用 content 属性来为元素添加内容默认为行内元素。 一般都是用于在元素内部的首尾插入一段内容文字或者小图标等等。 注意不能应用于替换元素如img、br等元素。 content属性 content属性主要用于在 ::before 和 ::after 两个伪元素中插入内容。 它的取值范围 none无伪元素normal基本等于nonestring字符串文本内容uri指定外部资源一般是图片资源无法显示则被忽略或显示占位符counter计数器函数attr(X)将元素的X属性以字符串形式返回。open-quote|close-quote前后引号如双引号、单引号等。no-open-quote|no-close-quote不产生内容 示例 div classwraplabel请选择您所在的城市/label /div.wrap::before {content: 开始-;color: #f00; } .wrap::after {content: url(./home.png); } label::before{content: open-quote;color: #f00; } label::after{content: close-quote;color: #f00; }页面呈现如下图 以上代码 在 div.wrap 前面添加文本内容红色的文字 开始- 在 div.wrap 后面添加图片资源home.png; 通过给 label 元素前后添加 open-quote 和 close-quote 的属性值增加了双引号并且能设置样式属性为红色。 伪元素的呈现 另外我们需要了解到伪元素之所以加个伪字在于它虽然创建了新的元素作为某个选中元素的子元素但它并不存在于DOM文档树中而仅仅只是一种逻辑上的虚拟呈现。 不过在当前浏览器的开发者工具中可以查看到部分伪元素这可以方便我们进行调试。 如上图左边dom文档结构中并没有伪元素右边在浏览器的开发者工具里能看到 ::before、::after 和 ::marker 三个伪元素。 伪元素与伪类的区别 伪元素与伪类由于在写法上比较类似所以常常被混淆多见于把伪元素说成是伪类。 虽然并没有啥大的影响但我们也有必要了解下它们的区别 伪类根据状态改变元素样式只是对选择器的扩展和弥补不足而伪元素则是在逻辑上创建了虚拟的新元素并可以给新元素添加样式。伪类使用单冒号CSS3在伪元素中引入双冒号是为了区分伪类和伪元素伪元素同时也支持单冒号。为了方便区分可以给伪元素一直使用双冒号。一个选择器中可以同时跟随多个伪类并一起起作用但伪元素如果在选择器后跟随多个则不会起作用。 /*对第一个div元素应用hover状态的样式*/ div:first-child:hover {color: #ddd; }/*无效没有伪元素会产生*/ .province::before::first-letter {content: 选择;color: #f00;font-size: 20px; }以上代码当使用多个伪元素时代码将失效不会创建新元素样式也不起作用。