-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss伪类-伪元素.html
38 lines (38 loc) · 18 KB
/
css伪类-伪元素.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html><html lang="zh-CN"><head><meta name="generator" content="Hexo 3.9.0"><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content><title>css伪类&伪元素 | zhiheng's blog</title><link rel="stylesheet" type="text/css" href="/css/style.css?v=1.0.0"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss/build/grids-responsive-min.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script><link rel="icon" mask sizes="any" href="/img/favicon.ico"><link rel="Shortcut Icon" type="image/x-icon" href="/img/favicon.ico"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/clipboard/dist/clipboard.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/gh/codeseven/toastr/build/toastr.min.js"></script><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/codeseven/toastr/build/toastr.min.css"></head><body><div class="body_container"><div id="header"><div class="site-name"><h1 class="hidden">css伪类&伪元素</h1><a id="logo" href="/.">zhiheng's blog</a><p class="description">喜于分享，勤于积累；欢迎关注我的微信公众号：治恒说说</p></div><div id="nav-menu"><a class="current" href="/."><i class="fa fa-home"> 首页</i></a><a href="/archives/"><i class="fa fa-archive"> 归档</i></a><a href="/about/"><i class="fa fa-user"> 关于</i></a><a href="/demo/"><i class="fa fa-square"> 有趣的代码</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title">css伪类&伪元素</h1><div class="post-meta">2016年11月25日<script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"></span><span> 阅读</span></span></div><div class="post-content"><p>样式规则通常根据元素在文档结构中的位置应用到元素；但是，级联样式表使用伪类和伪元素的概念，根据位于文档树之外的信息来允许格式设置。伪元素用于处理元素的子部分（例如 :first-letter 或 :first-line），而伪类根据元素名、元素属性或元素内容以外的特征（例如 :first-child、:visited 或 :hover）将元素分类。伪类通常是动态的，这意味着在用户与文档交互的同时元素可以获取或丢失伪类。</p>
<h3 id="伪类"><a href="#伪类" class="headerlink" title="伪类"></a>伪类</h3><p>当我们指定某一元素被选中后的特殊状态时,一个 <code>CSS 伪类</code> 会被作为一个关键词添加到选择器上. 例如 <code>:hover</code> 会在当用户鼠标指针悬停在由选择器指定的元素上时应用一个样式.</p>
<p>伪类连同伪元素一起, 他们允许你不仅仅是根据文档DOM树中的内容对元素应用样式,而且还允许你根据诸如像导航历史这样的外部因素来应用样式(<code>:visited</code>, 为例), 同样的,可以根据内容的状态 (例如 在一些表单元素上的 <code>:checked</code> ), 或者鼠标的位置 (例如 <code>:hover</code> 让你知道是否鼠标在一个元素上悬浮)来应用样式.</p>
<ul>
<li>:link</li>
<li>:visited</li>
<li>:active</li>
<li>:hover</li>
</ul>
<p>链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> {<span class="attribute">color</span>: <span class="number">#FF0000</span>} <span class="comment">/* 未访问的链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> {<span class="attribute">color</span>: <span class="number">#00FF00</span>} <span class="comment">/* 已访问的链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> {<span class="attribute">color</span>: <span class="number">#FF00FF</span>} <span class="comment">/* 鼠标移动到链接上 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> {<span class="attribute">color</span>: <span class="number">#0000FF</span>} <span class="comment">/* 选定的链接 */</span></span><br></pre></td></tr></table></figure></p>
<p>其中 :hover 不仅限于链接之上，其他元素皆可使用。</p>
<ul>
<li>:focus</li>
</ul>
<p>focus 在一个元素成为焦点时生效，用户可以通过键盘或鼠标激活焦点（例如：一次表单输入）。<br><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.first-name</span>:focus { <span class="attribute">color</span>: red; }</span><br><span class="line"><span class="selector-class">.last-name</span>:focus { <span class="attribute">color</span>: lime; }</span><br><span class="line"></span><br><span class="line"><<span class="selector-tag">input</span> class=<span class="string">"first-name"</span> value=<span class="string">"input value"</span>></span><br><span class="line"><<span class="selector-tag">input</span> class=<span class="string">"last-name"</span> value=<span class="string">"input value"</span>></span><br></pre></td></tr></table></figure></p>
<ul>
<li>:first-child</li>
<li>:last-child</li>
<li>:first-of-type</li>
<li>:last-of-type</li>
</ul>
<p><code>:first-child</code>代表了某个元素，这个元素是它父元素的的第一个子元素.<br><code>:first-of-type</code>伪类表示在父容器内其所有种类元素的第一个元素。<br><code>:last-child</code>伪类表示其父容器内最后一个子元素。<br><code>:last-of-type</code>伪类表示父容器内其所有种类元素的最后一个元素。</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">span:</span>first-<span class="class">child </span>{</span><br><span class="line"> background-color: lime;</span><br><span class="line">}</span><br><span class="line">ul :last-of-<span class="class">type </span>{</span><br><span class="line"><span class="symbol"> color:</span> orange;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="params"><div></span></span><br><span class="line"> <span class="params"><span></span>This span is limed!<span class="params"></span></span></span><br><span class="line"> <span class="params"><span></span>This span is not. :(<span class="params"></span></span></span><br><span class="line"><span class="params"></div></span></span><br><span class="line"></span><br><span class="line"><span class="params"><ul></span></span><br><span class="line"> <span class="params"><li></span>Lorem ipsum dolor sit amet. <span class="params"><span></span>Lorem ipsum dolor sit amet.<span class="params"></span></span> <span class="params"><span></span>This text will be orange.<span class="params"></span></span><span class="params"></li></span></span><br><span class="line"> <span class="params"><li></span>Lorem ipsum dolor sit amet.<span class="params"></li></span></span><br><span class="line"> <span class="params"><li></span>This text will be orange.<span class="params"></li></span></span><br><span class="line"><span class="params"></ul></span></span><br></pre></td></tr></table></figure>
<p>效果:<br><br><span style="background-color: lime;">This span is limed!</span> This span is not. :(</p>
<p>最后一个li和最后一个span元素的文本颜色将为橙色。</p>
<ul>
<li>:not</li>
</ul>
<p><code>:not</code>伪类也被称为反伪类。基本上它接收一个参数，在括号内书写另外一个“选择器”。实际上参数可以是另外一个选择器。</p>
<p>这里可能是链接式的，但是不会包含:not选择器。</p>
<p>下面示例中。:not伪类匹配参数外的元素。<br><figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">li:</span>not(.first-item) {</span><br><span class="line"><span class="symbol"> color:</span> orange;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="params"><ul></span></span><br><span class="line"> <span class="params"><li class="first-item"></span>Lorem ipsum dolor sit amet.<span class="params"></li></span></span><br><span class="line"> <span class="params"><li></span>Lorem ipsum dolor sit amet.<span class="params"></li></span></span><br><span class="line"> <span class="params"><li></span>Lorem ipsum dolor sit amet.<span class="params"></li></span></span><br><span class="line"> <span class="params"><li></span>Lorem ipsum dolor sit amet.<span class="params"></li></span></span><br><span class="line"><span class="params"></ul></span></span><br></pre></td></tr></table></figure></p>
</div><div class="tags"><a href="/tags/Css/"><i class="fa fa-tag"></i>Css</a></div><div class="post-nav"><a class="pre" href="/java设计模式之工厂模式.html">java设计模式--简单工厂模式</a><a class="next" href="/css实现计数器.html">css实现计数器</a></div></div></div></div><div class="pure-u-1-4 hidden_mid_and_down"><div id="sidebar"><div class="widget"><div class="search-form"><input id="local-search-input" placeholder="Search" type="text" name="q" results="0"><div id="local-search-result"></div></div></div><div class="widget"><div class="widget-title"><i class="fa fa-wechat"> 微信公众号</i></div><div class="tagcloud"><img src="/img/zhihengss.jpg" style="width: 80%"></div></div><div class="widget"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Github/">Github</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Mysql/">Mysql</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Python/">Python</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Spring-Boot/">Spring Boot</a><span class="category-list-count">6</span></li></ul></div><div class="widget"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/杂谈/" style="font-size: 15px;">杂谈</a> <a href="/tags/Kotlin/" style="font-size: 15px;">Kotlin</a> <a href="/tags/Google/" style="font-size: 15px;">Google</a> <a href="/tags/微信/" style="font-size: 15px;">微信</a> <a href="/tags/Photo/" style="font-size: 15px;">Photo</a> <a href="/tags/旅行/" style="font-size: 15px;">旅行</a> <a href="/tags/go/" style="font-size: 15px;">go</a> <a href="/tags/总结/" style="font-size: 15px;">总结</a> <a href="/tags/推荐/" style="font-size: 15px;">推荐</a> <a href="/tags/Spring-Boot/" style="font-size: 15px;">Spring Boot</a> <a href="/tags/Java/" style="font-size: 15px;">Java</a> <a href="/tags/运维/" style="font-size: 15px;">运维</a> <a href="/tags/Mysql/" style="font-size: 15px;">Mysql</a> <a href="/tags/Github/" style="font-size: 15px;">Github</a> <a href="/tags/教程/" style="font-size: 15px;">教程</a> <a href="/tags/软件/" style="font-size: 15px;">软件</a> <a href="/tags/Python/" style="font-size: 15px;">Python</a> <a href="/tags/Excel/" style="font-size: 15px;">Excel</a> <a href="/tags/工具/" style="font-size: 15px;">工具</a> <a href="/tags/JavaScript/" style="font-size: 15px;">JavaScript</a> <a href="/tags/Test/" style="font-size: 15px;">Test</a> <a href="/tags/Chrome/" style="font-size: 15px;">Chrome</a> <a href="/tags/Css/" style="font-size: 15px;">Css</a> <a href="/tags/Html/" style="font-size: 15px;">Html</a> <a href="/tags/设计模式/" style="font-size: 15px;">设计模式</a> <a href="/tags/Web/" style="font-size: 15px;">Web</a> <a href="/tags/React-Native/" style="font-size: 15px;">React-Native</a> <a href="/tags/ES6/" style="font-size: 15px;">ES6</a></div></div><div class="widget"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/211206-github精选-github加速访问神器.html">github精选-github加速访问神器</a></li><li class="post-list-item"><a class="post-list-link" href="/211204-github精选-一款高颜值的Redis客户端.html">github精选-一款高颜值的Redis客户端</a></li><li class="post-list-item"><a class="post-list-link" href="/211203-Python读取Excel中的图片（二）.html">Python读取Excel中的图片（二）</a></li><li class="post-list-item"><a class="post-list-link" href="/211124-github精选-Linux命令大全.html">github精选-Linux命令大全</a></li><li class="post-list-item"><a class="post-list-link" href="/211120-github精选-PeaZip一款好用又免费的压缩软件.html">github精选-PeaZip一款好用又免费的压缩软件</a></li><li class="post-list-item"><a class="post-list-link" href="/211116-使用Python读取Excel中的图片并对应到记录.html">使用Python读取Excel中的图片并对应到记录</a></li><li class="post-list-item"><a class="post-list-link" href="/211111-SpringRestTemplate的使用.html">Spring RestTemplate的使用</a></li><li class="post-list-item"><a class="post-list-link" href="/211108-github精选-秒杀系统设计与实现.html">github精选-秒杀系统设计与实现</a></li><li class="post-list-item"><a class="post-list-link" href="/210208-Mysql登录失败多次锁定配置.html">Mysql登录失败多次锁定配置</a></li><li class="post-list-item"><a class="post-list-link" href="/210206-SpringBoot-使用JdbcTemplate操作数据库.html">SpringBoot-使用JdbcTemplate操作数据库</a></li></ul></div><div class="widget"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://geektutu.com/" title="极客兔兔" target="_blank">极客兔兔</a><ul></ul><a href="https://www.itmuch.com/" title="周立的博客" target="_blank">周立的博客</a><ul></ul><a href="https://liwenzhou.com/" title="李文周的博客" target="_blank">李文周的博客</a><ul></ul><a href="https://github.com/dddreams/dddreams.github.io/issues" title="添加友链请提交Issues" target="_blank">添加友链请提交Issues</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer">Copyright © 2021 <a href="/." rel="nofollow">zhiheng's blog.</a> Powered by<a rel="nofollow" target="_blank" href="https://hexo.io"> Hexo.</a><a rel="nofollow" target="_blank" href="https://github.com/tufu9441/maupassant-hexo"> Theme</a> by<a rel="nofollow" target="_blank" href="https://github.com/pagecho"> Cho.</a></div></div></div><a class="show" id="rocket" href="#top"></a><script type="text/javascript" src="/js/totop.js?v=1.0.0" async></script><script type="text/javascript" src="//cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.js" async></script><script type="text/javascript" src="/js/fancybox.js?v=1.0.0" async></script><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.css"><link rel="stylesheet" type="text/css" href="/css/search.css?v=1.0.0"><script type="text/javascript" src="/js/search.js?v=1.0.0"></script><script>var search_path = 'search.xml';
if (search_path.length == 0) {
search_path = 'search.xml';
}
var path = '/' + search_path;
searchFunc(path, 'local-search-input', 'local-search-result');
</script><script type="text/javascript" src="/js/copycode.js" successtext="复制成功!"></script><link rel="stylesheet" type="text/css" href="/css/copycode.css"><script type="text/javascript" src="/js/codeblock-resizer.js?v=1.0.0"></script><script type="text/javascript" src="/js/smartresize.js?v=1.0.0"></script></div></body></html>