百度360必应搜狗淘宝本站头条
linux取消挂载yum卸载下横线怎么打mysql 外网访问权限php打乱数组顺序
当前位置：网站首页 > 编程文章 > 正文

CSS伪类和伪元素选择器 css伪类和伪元素区别

qiyuwang 2024-10-15 14:44 9 浏览 0 评论

CSS伪类/伪元素包括:

Link相关的

  • :link
  • :visited
  • :hover
  • :active

Link和Input相关的

  • :focus
  • :target
  • :enabled
  • :disabled
  • :checked
  • :indeterminate //没有默认选中的一组单选按钮
  • :required
  • :optional
  • :read-only
  • :read-write

位置数目相关的

  • :root 基本上就是选中html了,除非某些特殊情况比如xml文档中
  • :first-child是父节点的第一个子元素
  • :last-child是父节点的最后一个元素
  • :nth-child() 括号类可以有多重写法比如2n+1,关键字odd,even分别选中奇数和偶数,或填写具体数字,只选该数字的节点
  • :nth-of-type() 类似nth-child,但是能应用到不同类型
  • :first-of-type 选中父节点中的第一个该类型的子元素
  • :last-of-type 选择父节点中的最有一个该类型的子元素
  • :nth-last-of-type() 同nth-of-type,但是顺序反过来,从最后往选
  • :only-of-type 是父节点的唯一子节点时选中

关系伪类选择器

  • :not() 排除法选择器
  • :empty选择既没有文本也没有子元素的元素

文本相关的

  • ::first-letter 选择第一个字母
  • ::first-line 选择第一行
  • :lang 语言选择器

部分示例

<!DOCTYPE html>
<style>
 a:link {color: #FF0000}
 a:visited {color: #00FF00}
 a:hover {color: #FF00FF}
 a:active {color: #0000FF}
 /*选择获取焦点的input输入框*/
 input:focus{
 border:1px green bold;
 }
 /*选择元素p内的第一个字母*/
 p:first-letter {
 text-transform: uppercase;
 color:red;
 }
 /*选择元素p内的第一行*/
 p:first-line {
 text-decoration: underline;
 }
 /*选择属于其父元素的第一个子元素p*/
 p:first-child{
 color:firebrick;
 }
 /*在元素前面添加内容*/
 span:before{
 content: "<<";
 }
 /*在元素后面添加内容*/
 span:after{
 content: ">>";
 }
 /*选择前面有section元素的所有div元素,不管中间是否有别的元素*/
 section~div{
 background-color: red;
 }
 /*使用户选择的元素背景变为深橙色*/
 ::selection{
 background-color: darkorange;
 }
</style>
<a href="#">A Link</a><br>
<input type="text" name="name" id="name">
<p>this is a paragraph.</p>
<p>this is a paragraph.<br>The second line.</p>
<div><p>First child</p><p>Second child</p></div>
<span>A Tale of Two Cities</span>
<section></section><p></p>
<div>Div after section 1</div>
<div>Div after section 2</div>

nth-child示例

<!DOCTYPE html>
<style>
 tr:nth-child(even){
 background-color: beige;
 }
</style>
<table>
 <thead>
 <tr><th>Name</th><th>Quantity</th></tr>
 </thead>
 <tbody>
 <tr><td>BMW</td><td>1200</td></tr>
 <tr><td>Audi</td><td>1300</td></tr>
 <tr><td>Porsche </td><td>1000</td></tr>
 <tr><td>Benz </td><td>1100</td></tr>
 </tbody>
</table>

相关推荐

PayPal严重漏洞可通过不安全的JAVA反序列化对象

在2015年12月,我在PayPal商业网站(manager.paypal.com)中发现了一个严重的漏洞,这个漏洞的存在,使得我可以通过不安全的JAVA反序列化对象,在PayPal的网站服务器上远程...

提醒:Apache Dubbo存在反序列化漏洞

背景：近日监测到ApacheDubbo存在反序列化漏洞（CVE-2019-17564），此漏洞可导致远程代码执行。ApacheDubbo是一款应用广泛的高性能轻量级的JavaRPC分布式服务框架...

【预警通报】关于WebLogicT3存在反序列化高危漏洞的预警通报

近日，我中心技术支撑单位监测到WebLogicT3存在反序列化0day高危漏洞，攻击者可利用T3协议进行反序列化漏洞实现远程代码执行。...

Apache dubbo 反序列化漏洞(CVE-2023-23638)分析及利用探索

在对Apachedubbo的CVE-2023-23638漏洞分析的过程中，通过对师傅们对这个漏洞的学习和整理，再结合了一些新学的技巧运用，从而把这个漏洞的利用向前推了一步。整个过程中的研究思路以及...

案例|WebLogic反序列化漏洞攻击分析

目前网络攻击种类越来越多，黑客的攻击手段也变得层出不穷，常规的防护手段通常是对特征进行识别，一旦黑客进行绕过等操作，安全设备很难发现及防御。通过科来网络回溯分析系统可以全景还原各类异常网络行为，记录所...

【预警通报】关于ApacheOFBizRMI反序列化远程代码 执行高危漏洞的预警通报

近日，我中心技术支撑单位监测发现ApacheOFBiz官方发布安全更新，修复了一处远程代码执行漏洞。成功利用该漏洞的攻击者可造成任意代码执行，控制服务器。该漏洞编号：CVE-2021-26295，安...

关于OracleWebLogic wls9-async组件存在反序列化远程命令执行高危漏洞的预警通报

近日，国家信息安全漏洞共享平台（CNVD）公布了OracleWebLogicwls9-async反序列化远程命令执行漏洞。攻击者利用该漏洞，可在未授权的情况下远程执行命令。该漏洞安全级别为“高危”。现...

Rust语言从入门到精通系列 - Serde序列化/反序列化模块入门指北

Serde是一个用于序列化和反序列化Rust数据结构的库。它支持JSON、BSON、YAML等多种格式，并且可以自定义序列化和反序列化方式。Serde的特点是代码简洁、易于使用、性能高效。...

Java反序列化漏洞详解（java反序列化漏洞利用）

Java反序列化漏洞从爆出到现在快2个月了，已有白帽子实现了jenkins，weblogic，jboss等的代码执行利用工具。本文对于Java反序列化的漏洞简述后，并对于Java反序列化的Poc进行详...

关于Oracle WebLogic Server存在反序列化远程代码执行漏洞的安全公告

安全公告编号:CNTA-2018-00222018年7月18日，国家信息安全漏洞共享平台（CNVD）收录了OracleWebLogicServer反序列化远程代码执行漏洞（CNVD-2018-13...

CVE-2020-9484 Apache Tomcat反序列化漏洞浅析

本文是i春秋论坛作家「Ybwh」表哥原创的一篇技术文章，浅析CVE-2020-9484ApacheTomcat反序列化漏洞。01漏洞概述这次是因为错误配置和org.apache.catalina....

告别脚本小子系列丨JAVA安全(8)——反序列化利用链(下)

0x01前言...

关于WebLogic反序列化高危漏洞的紧急预警通报

近日，WebLogic官方发布WebLogic反序列化漏洞的紧急预警通告，利用该漏洞可造成远程代码执行并直接控制Weblogic服务器，危害极大。该漏洞编号为：CVE-2019-2890，安全级别为“...

高危!Fastjson反序列化漏洞风险通告

漏洞描述...

学习Vulhub的Java RMI Registry 反序列化漏洞

这个实验，我们先通过dnslog演示命令执行，然后通过反弹shell获得root权限。JavaRemoteMethodInvocation用于在Java中进行远程调用。RMI存在远程bind的...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表