CSS 之伪类及伪元素

时间 2019-11-20

标签 css 元素栏目 CSS 繁體版

原文原文链接

　　伪类和伪元素用起来很是的方便，在查阅资料及测试后整理下来。php

1、伪类css

　　CSS 伪类用于向某些选择器添加特殊的效果。伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不能够从文档树上推断获得的。html

　　伪类即 CSS 内植类，CSS 内部自己赋予它一些特性和功能，也就是不用再class=...或id=...就能够用伪类获取元素，固然也能够改变它的部分属性（如： a:link{color:#FF0000;}）。前端

属性	描述	通俗说明	CSS
:active	向被激活的元素添加样式。	用鼠标点击时，元素增长特效，鼠标松开时，特效消失。多用在按钮的点击上。	1
:focus	向拥有键盘输入焦点的元素添加样式。	元素得到焦点时，元素增长特效，失去焦点时，特效消失。多用在让点击以后的元素一直拥有某些样式，active作不到，能够用在<input>标签上。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	当鼠标悬浮在元素上方时，增长特效，鼠标离开元素时，特效消失。常与cursor属性同时使用，当属性值为pointer时，光标位于元素上方时会变成手型。cursor还有url属性，其为设置图片地址。	1
:link	向未被访问的连接添加样式。	连接点击以前添加某些样式。	1
:visited	向已被访问的连接添加样式。	连接点击以后添加某些样式。	1
:first-child	向元素的第一个子元素添加样式。	对某元素的第一个子元素添加样式，经常使用在ol,ul下面的li，或者tr下面的td或th上等。	2
:lang	向带有指定 lang 属性的元素添加样式。		2

　　测试Demo源码，以下：git

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    div{ line-height:30px; }
    #divActive:active{ background-color:red; }
    #divHover:hover{ background-color:red; cursor:pointer; }
    #txtFocus:focus{ background-color:red; }
    div ul li:first-child{ background-color:red; }
    div a:link{ background-color:red; }
    div a:visited{ background-color:blue; }
    div a:visited{ background-color:blue; }
    div input:lang(fr){ background-color:red; }
  </style>
</head>
<body>
    <div id="divActive">测试Active</div>
    <div id="divHover">测试Hover</div>
    <div id="divFocus"><input id="txtFocus" type="text"></div>
    <div id="divFirst-child">
      <ul>
        <li>老大</li>
        <li>老二</li>
        <li>老三</li>
      </ul>
    </div>
    <div><a href="#">超连接</a></div>
    <div>
      <input id="text" type="text" value="文本" lang="fr" />
    </div>
</body>
</html>

2、伪元素github

属性	描述	通俗说明	CSS
:first-letter	向文本的第一个字母添加特殊样式。		1
:first-line	向文本的首行添加特殊样式。		1
:before	在元素以前添加内容。	在元素文档流前添加内容。经常使用于隐形的提示信息内容。	2
:after	在元素以后添加内容。	在元素文档流后添加内容。经常使用于隐形的提示信息内容。	2

　　注意：伪元素若是没有设置“content”属性，伪元素是无用的。若是不想设置内容，能够设置content属性为空引用 content:""。插入的内容在页面的源码里是不可见的，只能在css里可见。CSS继承规则适用于插入的元素，插入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。web

　　以：before为例测试Demo代码，以下：浏览器

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        input{ display: block; }
        body *:before{ content: "before"; color: red; }
    </style>
</head>
<body>
    <h1>HTML控件伪元素支持测试</h1>
    <input id="button" type="button" value="普通按钮" />
    <input id="reset" type="reset" value="重置" />
    <input id="submit" type="submit" value="提交" />
    <input id="text" type="text" value="文本" lang="fr" />
    <input id="file" type="file" value="文件" />
    <input id="password" type="password" />
    <input id="checkbox" type="checkbox" />
    <input id="radioY" type="radio" name="sel" value="Yes" />
    <input id="radioN" type="radio" name="sel" value="No" />
    <div><input id="cbN" type="radio" name="sel" /></div>
    <input id="hid" type="hidden" />
    <textarea id="txt" rows="2" cols="20"></textarea>
    <table style="width:100%;"><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table>
    <img id="img" src="" alt="图片" />
    <select id="sel">
        <option>请选择</option>
    </select>
    <hr />
    <div id="div"></div>
</body>
</html>

　　一、插入非文本内容函数

　　咱们能够把属性的值置为空字符串或是插入文本内容。还有以下几种非文本内容，以下：工具

　　[1]、能够包含一个指向一个图像的URL，就像在css里包含一个背景图像同样作你能作的

　　[2]、固然，你能够包含一个Data URI代替图像引用，正如你能够用css背景同样。

　　[3]、能够选择ATRR(X)中的函数的形式。此功能，根据规范，“把X属性的值以字符串的形式返回”，以下：

a:after {
  content: attr(href);
}

　　attr（）函数的功能：它获得特定属性的值并把它做为插入的文本成为一个伪元素。

　　显示结果：页面上的每个<a>元素的href值当即被放置在每一个各自的<a>元素的后面。在文档被打印时，它能够用做一个包含全部URl的打印样式表。

　　能够用这个函数去获取元素的title属性，或者甚至是microdata的值。固然，并非全部的例子都符合本身的实际，但根据不一样的状况，一个特定的属性值做为一个伪元素能够是实际的。然而，获取title或者图像的alt的值并做为实际的伪元素显示在页面上是不可能的。

　　注意：

　　伪元素必须是被应用元素的子元素。<img>，是void(或空元素)，没有子元素，因此它在此不可用，一样也适用于其余空元素，例如：<input>。

1. CSS 伪类与伪元素
2. CSS——伪元素与伪类
3. CSS伪类与伪元素
4. css伪类和伪元素
5. css伪类与伪元素
6. CSS伪类和伪元素
7. CSS 伪类伪元素
8. css—伪类和伪元素
9. 【CSS】伪类与伪元素
10. css伪类及伪元素用法
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• 如何伪造ARP响应？ - TCP/IP教程
• Flink 数据传输及反压详解
• Kotlin学习（二）基本类型

CSS 之 伪类及伪元素

四、提醒注意

CSS 之伪类及伪元素

　　四、提醒注意