WEB前端 -- CSS伪类、伪元素选择器

标签: WEB前端 伪类 CSS
89人阅读 评论(0) 收藏 举报
分类:

一、伪类选择器

伪类通过冒号(:)进行定义,它定义了元素的状态,如点击按下、点击完等。以前都是直接操作元素的样式,现在可为元素的状态改样式,看上去更“动态”。

伪类一般反映无法在CSS中轻松或可靠检测到的某个元素的状态或属性。

伪类更多地是定义元素的状态。

伪类选择器:

1)E:link

2)E:visited

3)E:hover

4)E:active

5)E:not(S) 匹配不包含S的E元素

6)E:first-child

7)E:last-child

8)E:only-child

9)E:empty

10)E:checked

11)E:nth-child(n)

二、伪元素选择器

伪对象即伪元素,表示DOM外部的某种文档结构。

伪元素改变文档结构,在结构外另加一个没有实际存在的元素(即伪元素)。

常用伪元素:

1)E:before/E::before

2)E:after/E::after

伪元素添加图片时与普通元素一样要指定为块元素、宽和高。

如p::after{content:"";background:url();display:inline-block;width:20px;height:50px;}

例:为选中的选项设置背景颜色及选中项后面加“我被选中了”

<fieldset>
	<legend>颜色最喜欢的颜色</legend>
    <ul>
    	<li><label><input type="radio" name="color-group" value="0"/><span>蓝色</span></label></li>
        <li><label><input type="radio" name="color-group" value="0"/><span>绿色</span></label></li>
        <li><label><input type="radio" name="color-group" value="0"/><span>灰色</span></label></li>
    </ul>
</fieldset>
<fieldset>
	<legend>颜色喜欢的颜色</legend>
    <ul>
    	<li><label><input type="checkbox" name="color-group" value="0"/><span>蓝色</span></label></li>
        <li><label><input type="checkbox" name="color-group" value="0"/><span>绿色</span></label></li>
        <li><label><input type="checkbox" name="color-group" value="0"/><span>灰色</span></label></li>
    </ul>
</fieldset>
<style>
 input:checked+span{ background:#F00;}
 input:checked+span::after{ content:"   我被选中了"}

查看评论

从"FILE://"和"HTTP://"链接下载的不同点

从"FILE://"和"HTTP://"链接下载的不同点本文适用于Microsoft Internet Explorer versions 3.0, 3.01, 3.02, 4.0, 4.01, 4....
  • ghj1976
  • ghj1976
  • 2000-08-28 10:48:00
  • 1596

CSS 的其它选择器

首先CSS 选择器分这么几大类:基础选择器、关系选择器、属性选择器、伪类选择器、伪对象选择器。关系选择器1.包含选择符(E F) 选择所有被E 元素包含的F 元素,中间用空格隔开ul li{ col...
  • lzh657083979
  • lzh657083979
  • 2017-11-03 17:28:36
  • 105

web前端-CSS 伪元素 -023

语法伪元素的语法:selector:pseudo-element {property:value;}CSS类也可以使用伪元素:selector.class:pseudo-element {proper...
  • helloMr_wo
  • helloMr_wo
  • 2016-10-11 11:05:39
  • 167

CSS3:伪对象选择器

1.   :before  在盒子内容之前添加内容    :after     在盒子内容之后添加内容 注意:before 和after必须和content结合使用,即使没有内容插入也要写conten...
  • luohuaxinyue
  • luohuaxinyue
  • 2015-12-24 15:08:46
  • 1740

伪对象选择器&&属性选择器

伪对象选择器 属性选择器: 属性选择器eg: 伪对象选择器&&属性选择器综合运用: html> html lang="en"> head> meta charset="UTF-8...
  • Somnus_djj
  • Somnus_djj
  • 2017-11-15 17:34:34
  • 56

CSS 伪选择器

今天在写看组件代码时,看到了CSS选择器,是如此强大,有些东西就没有根本不了解,这里mark下,以备后续之用 选择器 例子 例子描述 CSS ...
  • spy19881201
  • spy19881201
  • 2014-04-18 14:52:16
  • 893

CSS伪元素选择器:before与:after

在css标签中有这样子的标签div:before、div:after,对于before、after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处?   :befor、:after是CS...
  • zerlinda_c
  • zerlinda_c
  • 2015-12-07 16:54:58
  • 5873

使用CSS伪类和伪对象实现dl>dt+dd在一行显示

有时我们想在一行内显示一个标题,以及一段内容,虽然看起来比较简单,但是为了语义化用dl比较合适,但是它默认是block元素,改成inline?那么有多段呢?不就都跑上来了?用float?那问题也...
  • itpinpai
  • itpinpai
  • 2018-04-13 10:03:41
  • 28

CSS外部样式表+伪选择器

CSS外部样式表 目的 就是将样式和内容分离开,将样式放到专门的一个位置。 好处 (1)便于重用 (2)便于团队开发 (3)便于后期的维护 (4)减小页面的大小,使用户更快的下载网页。 ...
  • IstarI
  • IstarI
  • 2016-06-22 20:49:35
  • 752

【JS】【jQuery】【获取对象,选择器】

通过$(“XXX”)方式获取的都是jQuery对象,由Dom的节点元素组成的伪数组对象- 基本选择器$("#id值"); //返回一个伪数组,里面只有一个对应id的节点元素 $("div")...
  • weixin_40315550
  • weixin_40315550
  • 2017-12-26 10:35:00
  • 57
    个人资料
    持之以恒
    等级:
    访问量: 5705
    积分: 954
    排名: 5万+
    文章存档