关闭

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

标签: WEB前端伪类CSS
69人阅读 评论(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:"   我被选中了"}

0
0
查看评论

CSS 属性 - 伪类和伪元素的区别

前言虽然自己也是做前端的,可是对于真正的前端开发者来说,自己也只不过是一个只会复制黏贴的菜鸟而已。今天由于工作的原因,需要用到伪类和伪元素。以前自以为是的认为,伪类和伪元素既然都有“伪”,那概念肯定是一样的,不就是给选择器添加一些样式效果吗。现在想想真是可笑至极。参考了一下前辈们的经验,再这里总结一...
  • ai125073509
  • ai125073509
  • 2016-11-30 18:23
  • 368

css中伪类与伪元素的区别

看了网上的有助于理解css中伪类与伪元素区别的帖子,做了如下笔记: 一:定义: 1.css伪类用于向某些选择器添加特殊的效果 2.css伪元素用于将特殊的效果添加到某些选择器 3.都是向选择器添加特殊效果的(即用css无法描述的效果) 二:理解: a.  伪类的效果是...
  • github_36091081
  • github_36091081
  • 2016-10-30 13:46
  • 358

css 伪元素 伪类 使用 万能清除浮动 ..

参考 http://blog.jobbole.com/49173/ css 伪元素即插入的虚伪元素 像:before :after 插入元素 css 伪类 就是 操作class 样式 利用伪元素清除浮动 ps 利用伪 元素插入的dom 在dom结构中是看不到的 不过可以在...
  • java_goodstudy
  • java_goodstudy
  • 2016-12-20 03:24
  • 4282

关于伪类与伪元素及其前面的冒号和两个冒号的使用

关于伪类与伪元素及其前面的冒号和两个冒号的使用 我们知道,css提供了伪类及伪元素来增加css的功能及灵活性,然而,对于其使用方式有时候却有一些比较困惑于人的地方,比如什么是伪类,什么是伪元素,它们之间有什么区别,等等。 下面先上一张css选择器的汇总表: "CSS...
  • qq_25292481
  • qq_25292481
  • 2016-09-18 19:56
  • 1587

第二章 CSS工作原理(伪类与伪元素)

一. 伪类   伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上。伪类分两种。   汵 UI(User Interface,用户界面)伪类会在 HTML 元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用 CSS&...
  • Vivianluolita
  • Vivianluolita
  • 2016-06-22 16:16
  • 517

CSS3伪类与伪元素的区别及注意事项

CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特殊的效果添加到某些选择器 讲道理,可能我语文不好,我觉得这两句话是等价的 :-) 根本不能看出有什...
  • q1056843325
  • q1056843325
  • 2016-12-10 19:59
  • 1489

浅谈CSS伪类和伪元素及CSS3新增伪类

p:first-of-type 选择属于其父元素的首个元素的每个元素。 p:last-of-type   选择属于其父元素的最后元素的每个元素。 p:only-of-type   选择属于其父元素唯一的元素的每个元素。 p:only-child    ...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-02-28 17:09
  • 2390

CSS中 伪类和伪元素的用法 --实现元素前后添加[]框

无标题文档 a{ position:relative; display:inline-block; outline:none; text-decoration:none; color:#636; font-size:24px; padding:5px 25px; } a:hover:...
  • ios0213
  • ios0213
  • 2016-06-16 18:41
  • 199

css3和css伪类和伪元素区别与兼容性

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。 伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的,用于区分伪类和伪元素。但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line、:first-letter、:before、:after等。 ...
  • luman1991
  • luman1991
  • 2017-01-31 11:33
  • 688

伪类和伪元素的区别

个人的关注点可能主要集中在js方向上,但是本着css也不能丢掉的原则,所以上网查了些css方面的困惑点,这一篇的主题是:伪类和伪元素。 伪类和伪元素的根本区别在于:它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看,如果需要添加新元素加以标识的,就是伪元素,反之,如果只需要在既有元...
  • z905951024
  • z905951024
  • 2016-03-17 11:18
  • 2898
    个人资料
    • 访问:2280次
    • 积分:463
    • 等级:
    • 排名:千里之外
    • 原创:36篇
    • 转载:20篇
    • 译文:0篇
    • 评论:0条
    文章分类