css 伪类选择器

1.first-line 伪元素选择器
用于元素的第一行的文字使用的而样式。
如:div:first-line{color:red;},该样式定义了div标签内的第一行文字的颜色。

2.first-letter 伪元素选择器
用于为元素的首字母或第一个字使用的样式。
如:div:frist-letter{font-size:20px;},该样式定义了div标签内的首字母或文字使用20px的字体大小。

3.before伪元素选择器
用于在元素之前插入内容。
用法:div:before{content:插入文字/图片/音频等},该元素定义了在div标签内容前面添加content包含的内容。里面可以定义插入内容的样式。
注意:该选择器在IE6\7\8中无效。

4.after伪元素选择器
用于在元素之后插入内容。
用法:div:before{content:插入文字/图片/音频等},该元素定义了在div标签内容后面添加content包含的内容。里面可以定义插入内容的样式。
注意:该选择器在IE6\7\8中无效。

5.root选择器
root选择器应用于页面文档的根目录。该样式只用于页面中存在元素的地方。
使用方法::root{background-color:red},假如页面中只有一段文字,那么这段文字的背景为红色。它只包含网页中的信息部分,和body所包含的区域不同。

6.not选择器
过滤、排除作用,如果想排除某个元素下面的子元素不使用此样式,可以选择not选择器。
使用方法:div:not(span){},排除div元素下面的span标签使用此样式。

7.empty选择器
当页面元素内容为空白时使用的样式。
如::empty{background-color:red},在页面中元素内容为空的背景色设为红色。

时间: 2024-10-12 15:18:53

css 伪类选择器的相关文章

CSS伪类选择器active模拟JavaScript点击事件

一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现.超链接的4种状态,需要有特定的书写顺序才能生效.注意,a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后.可靠的顺序是:l(link)ov(v

css伪类选择器

伪类通过冒号来定义,他定义了元素的状态,如点击按下.点击完成等等.我们之前都是直接操作元素的样式现在可以为元素的状态改变样式,使元素看上去更"动态". 伪类选择器: 1.E:link2.E:visited3.E:hover4.E:active5.E:not()6.E:first-child7.E:last-child8.E:only-child9.E:empty10.E:checked11.E:nth-child(n) 1.E:link 设置超链接a在未被访问时的样式(特指a标签) a

css伪类选择器详细解析及案例使用-----伪类选择器(1)

动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的E元素,且匹配的元素被激活.常用于锚点与按钮上.E:hover :选择匹配的E元素,且用户鼠标停留在元素上.E:focus :选择匹配的E元素,且元素获得焦点. 锚点伪类设置遵守“爱恨原则”,即LoVe/HAte,也就是“link-visited-hover-active”. 目标伪类选择器(此为动

CSS伪类选择器和伪元素选择器

CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 1 a:link{background-color:blue;} //未访问前深蓝色 2 a:visited{background-color:beige;} //访问过淡黄色 3 a:hover{background-color:aqua;} //鼠标悬停时水蓝色 4 a:active{background-col

css 伪类选择器:checked实例讲解

css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择器来匹配选择没有被选中的单选按钮或复选框. 语法: :checked { style properties } 如: input:checked{ background-color:red; } 设置被选中的单选按钮(radio)或复选框(checkbox)的背景颜色为红色(单选框和复选框只有在Op

CSS伪类选择器 奇偶匹配nth-child(even)

语法: :nth-child(an+b) 下面就把CSS3标准中nth-child()用法大致介绍给大家: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法. 第一种:简单数字序号写法 :nth-child(number) 直接匹配第number个元素.参数number必须为大于0的整数. 例子: li:nth-child(3){background:blue;} 第二种:倍数写法 :nth-child(an) 匹配所有倍数为a的元素.其中参数an中的字母

CSS伪类选择器:before、:after使用:插入字符、插入图片、插入项目编号

before: 伪元素选择器用于在某个元素之前插入一些内容 伪类选择器:before使用content属性插入字符.属性插入图片 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8

css伪类选择器详细解析及案例使用-----伪类选择器(2)

结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth-child(2n+1)*/ <li>two</li> /*li:nth-child(2)*/ <li>three</li> /*li:last-child li:nth-child(2n+1)*/ </ul> <div>adc</

今天做项目用了CSS伪类选择器“before”,就来了解了解它怎么使用,又如何用?

我不知道有没有小伙伴以前跟我一样,在一个元素内部想要添加一个小图标或者小东西的时候, 直接在HTML文档里自己加上<span>标签,或者其他的.亦或者用javascript在该元素中追加一个元素. 比如我们向下面这些div中添加b元素: <div></div> <div></div> <div></div> <div></div> $(function){ $("div").ap

关于css伪类选择器

常见的伪类(pseudo-classes)和伪元素(pseudo-elements) 伪类::hover 鼠标放上去的效果 :actiive  点击之后效果 伪元素 :before :after <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type