1. CSS3中

:Pseudo-classes 伪类

::Pseudo-elements 伪元素

2. 为什么叫伪类和伪元素?

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素标签才能达到,但它们并不是真正的类或标签。

3. 伪类和伪元素可以使用“子绝父相”

div {
....
position: relative;
} div::before{
content:...;
position: absolute;
}

CSS - 伪类和伪元素的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

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

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  4. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  5. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

  6. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  7. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

  8. 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  9. 《转载》详解 CSS 属性 - 伪类和伪元素的区别

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  10. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. thinkphp 连接webservice接口

    嗯,我现在真的好像骂人啊,但是我又是个文明的人,所以我就写出来让自己冷静一下 ok,正事,thinkphp连别人写的webservice接口 刚开始他叫什么nc接口,就把我给骗了,这就是人家的名字,和 ...

  2. tkinter学习(5)messagebox、pack、grid和place方法

    1.messagebox信息弹出框 1.1 代码: import tkinter as tk #导出tk模块 import tkinter.messagebox #导出弹出信息框 #定义窗口.标题.大 ...

  3. AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    一.Flutter AppBar 自定义顶部按钮图标.颜色 leading   在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title  标题,通常显示为当 ...

  4. json 字符串 <----> json 对象

    一,字符串 -->JSON对象 1,转换函数 JSON.parse(json_str): 2,$.parseJSON(json_str):  用的是 jquery 的插件  所以需要引入 jq. ...

  5. Atcoder Beginner Contest145E(01背包记录路径)

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int a[3007],b[3007];int ...

  6. 【C语言】编写程序,输出以下图形

    编写程序输出以下图形: * ** *** **** ***** 代码: #include <stdio.h> int main() { int i, j; ; i <= ; i++) ...

  7. cnpm - 解决 " cnpm : 无法加载文件 C:\Users\93457\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息 。。。 "

    1.在win10 系统中搜索框 输入 Windos PowerShell选择 管理员身份运行 2,打开了powershell命令行之后,输入 set-ExecutionPolicy RemoteSig ...

  8. go.php

    <?php $t_url=$_GET['url']; if(!empty($t_url)) { preg_match('/(http|https):\/\//',$t_url,$matches) ...

  9. LeetCode练题——88. Merge Sorted Array

    1.题目 88. Merge Sorted Array——Easy Given two sorted integer arrays nums1 and nums2, merge nums2 into  ...

  10. 工具 - 正则Cheat sheet