CSS选择器_css选择器有_______a属性选择器b伪类选择器c通用兄弟元素选择器d否定选择器-程序员宅基地

技术标签: CSS  css选择器  前端  

根据W3C定义CSS3 选择器:
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

  • 基础选择器
  • 层次选择器
  • 伪类选择器
  • 伪元素选择器
  • 属性选择器

【基础选择器】

  1. 元素选择器(选择元素名) \ 如:p{color:red;}
  2. ID选择器(#号+ID名)\ 如:#csdn{color:black;}
  3. 类选择器(.+class名) \ 如:.csdn{color:blue;}
  4. 通配符选择器(选择全部元素,不建议使用)\如:* {color:green}
  5. 并集选择器/组合选择器(多个不同的标签,应用相同的样式/声明冲突时,需要分开计算)\如:p,h1,span{color:red;}

【层次选择器】

  1. 子级选择器 (元素之间用>分割)\如:p>span{color:red;}
  2. 后代选择器(元素之间用空格分隔)\如:section span{color:blue;}
  3. 兄弟选择武器(元素之间用+分隔)\如:h1+h2{color:green;}

【伪类选择器】

  1. 动态伪类选择器:(网络通用:·爱恨原则·)

动态伪选择器的书写顺序: 1、link和visited必须放在最前面(无先后顺序,静态伪类选择器)
2、link和visited只能用于a标签 3、link和visited后面是focus 4、focus后面是hover
5、hover后面是active

  1. 结构为类选择器

元素名:first-child第一个元素。
元素名:last-child最后一个元素。
元素名:nth-child(n)某一个元素 想选择第几个,n就取值多少。
元素名:nth-child(-n+m)选中前m个元素 n起始值是0。
元素名:nth-of-type(n) 选中第n个元素。
元素名:nth-last-child(n)选中倒数第n个元素.

  1. 否定伪类选择器

元素名:not(n)除了某个元素,其它元素添加样式

【伪元素选择器】(CSS创建的元素,都是选中元素的子元素)

  1. 元素名:before(元素的第1个子元素)
  2. 元素名:after(元素的最后1个子元素)
  3. 元素名:first-letter(元素的第1个字)
  4. 元素名:first-line(元素的第1个行)
  5. input::-webkit-input-placeholder(修改输入框提示信息样式)

【属性选择器】
元素名称[属性名+“属性值”]\如:input[type=“text”]
[扩展]

1.格式: 元素名[属性名^=属性值开头的内容]选中以XXX开头的元素
input[type^=“te”]+span{ color:red;}
2.格式: 元素名[属性名 $ =属性值结尾的内容]选中以XXX结尾的元素
input[type $ =“d”]+span{ color:blue;}
3.格式: 元素名[属性名* =属性值包含的内容]选中包含XXX的元素
input[type*=“i”]+span{ color:green;}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45666821/article/details/102997363

智能推荐

飞书小程序开发 H5应用嵌入飞书_飞书开发h5网页-程序员宅基地

文章浏览阅读1.3w次,点赞6次,收藏18次。因为公司的业务需求。需要把H5页面嵌入到飞书里面。而且还要进行页面跳转。可直接在PC飞书小程序直接侧边栏查看详情页。飞书的文档真的太扯淡了。什么都是一句话概括。还好自己有小程序开发的基础。经过自己不断的测试终于实现处理了。做到差点崩溃了。生成一个飞书小程序,这步在飞书里面描述的很详细了。不做过多的赘述。https://open.feishu.cn/document/uQjL04CN/ukjL54SO飞书嵌入H5页面 1.前期准备:了解使用飞书的web-view这个组件嵌入页面web-.._飞书开发h5网页

pdf文件打开后部分文字无法显示_pdf生僻字不显示-程序员宅基地

文章浏览阅读1.6k次。经过一系列排查,发现查看的电脑上缺失了字体,使用wps查看时,缺失字体没有任何提示,但是使用Acrobat Reader,缺失字体是有提示的。最后网上查找缺失的字体类型,并将缺失的字体放入该目录下即可正常查看。场景:pdf文件在系统内预览正常,但是下载到本地电脑上,使用wps查看,部分标题会消失,只有标题里面的数字还能显示出来。_pdf生僻字不显示

Oracle禁止用户delete,Oracle数据库用户无法删除的处理案例-程序员宅基地

文章浏览阅读926次。Oracle数据库用户无法删除的处理案例删除用户提示信息SQL> drop user jzfp cascade;drop user jzfp cascade*ERROR at line 1:ORA-00604: error occurred at recursive SQLlevel 2ORA-01422: exact fetch returns more thanrequested num..._oracle 删除用户 oracle删除用户 ora-00604: error occurred at recursive sql le

Hdu 4311-Meeting point-1 曼哈顿距离,前缀和-程序员宅基地

文章浏览阅读174次。题目:http://acm.hdu.edu.cn/showproblem.php?pid=4311Meeting point-1Time Limit: 2000/1000 MS (Java/Others)Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 3426Accepted Submission(..._c++ 曼哈顿距离矩形 前缀和

46、基于51单片机的函数发生器四种波形频率系统设计(原理图+PCB图+程序+开题报告+参考论文)_基于51单片机的函数发生器设计总结-程序员宅基地

文章浏览阅读206次。1. 单片机型号:STC89C52/51、AT89C52/51、AT89S52/51都可通用。2.产品自带单片机上电复位电路、手动复位电路(复位按键)、晶振电路(给单片机提供时钟周期)。3.可以通过按键设置切换波形和频率。4.可以产生4种波形,矩形波、三角波、正弦波、锯齿波。5.通过1602液晶显示波形和输出频率,频率范围为1HZ-10000HZ,步进频率为1HZ。6.输出幅度范围为0.1V到5V,步进为0.1V。7.输出方波时,占空比可以设置,占空比范围10%--99%。_基于51单片机的函数发生器设计总结

杰佛伦Profinet位移传感器与S PLC连接组态方法步骤详解-程序员宅基地

文章浏览阅读118次。通过正确连接硬件、进行PLC设置、编写PLC程序并上传到PLC,你可以成功将杰佛伦Profinet位移传感器与S PLC进行连接和组态。根据实际情况,你可能需要调整上述步骤中的细节和代码,以适应你所使用的具体设备和软件环境。在实际应用中,你需要根据传感器的通信协议和PLC编程语言进行适当的编码。完成PLC程序的编写后,将其上传到S PLC。确保PLC和计算机通过适当的通信接口连接,并使用PLC编程软件将程序上传到PLC。在PLC工程中创建一个新的程序块,并编写适当的逻辑来处理从传感器接收的数据。_profinet位移传感器

随便推点

小波去噪、均值滤波、中值滤波对波形去噪的MATLAB仿真程序_init=2055615866-程序员宅基地

文章浏览阅读1.5k次。小波去噪:load leleccum;index = 1:1024;x = leleccum(index);%产生噪声信号init = 2055615866;randn(‘seed’,init);nx = x + 18*randn(size(x));%获取消噪的阈值[thr,sorh,keepapp] = ddencmp(‘den’,‘wv’,nx);%对信号进行消噪xd1 = wdencmp(‘gbl’,nx,‘db4’,1,thr,sorh,keepapp);xd2 = wden_init=2055615866

linux提取基因名称和序列,一种批量提取基因组基因信息并翻译比对分析序列的方法与流程...-程序员宅基地

文章浏览阅读2.7k次。技术特征:1.一种批量提取基因组基因信息并翻译比对分析序列的方法,其特征在于,将某一物种的转录本id或者基因id,依据供试基因组cds文件、蛋白质文件、gff文件和染色体fasta文件信息,通过6个perl脚本程序,实现目标转录本或基因在基因组上的位置、长度、正反义链结构信息的提取,并在染色体fasta文件上提取该转录本或基因的cds或基因序列,在基因组蛋白文件上提取该转录本的蛋白质序列;最后对所..._linux 翻译cds

ServiceMesh和Serverless_servermesh和serverless-程序员宅基地

文章浏览阅读1w次,点赞23次,收藏57次。ServiceMesh和Serverless转载声明本文大量内容系转载自以下文章,有删改,并参考其他文档资料加入了一些内容:微服务 | 我为啥不看好 ServiceMesh作者:芋道源码出处:CSDN1 前言今年,ServiceMesh(服务网格)概念在社区里头非常火,有人提出2018年是ServiceMesh年,还有人提出ServiceMesh是下一代的微服务架构基础。作为架构师,如果你现在还不了解ServiceMesh的话,是否感觉有点落伍了?那么到底什么是ServiceMesh?它_servermesh和serverless

Windows下安装SuperLU_superlu6.0.0-程序员宅基地

文章浏览阅读1.8k次。做个记录,备查。原文:http://blog.csdn.net/xiaojiao661025/article/details/43449795http://www.xuebuyuan.com/1707596.html1、下载SuperLU文件:这里下载的是 Version 4.12、生成库文件:生成SuperL_superlu6.0.0

php datatable ajax,JQuery DataTable删除行后的页面更新利用Ajax解决-程序员宅基地

文章浏览阅读75次。使用Jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,需要注意的方法如下:前台页面中初始化table时注意:var table = $('#sorting-advanced');table.dataTable({'bServerSide': true,'sAjaxSource': 'servlet/UserList','bProcessing'..._fnpagechange(1, true)

Spring Boot:实现与数据库的连接_springboot连接数据库-程序员宅基地

文章浏览阅读1.1w次,点赞8次,收藏70次。快速开发:Spring Boot提供了一系列的开箱即用的功能和特性,使得开发人员可以快速构建和部署应用程序。简化配置:Spring Boot自动配置了许多常见的配置,如数据源、Web服务器、安全等等,这样开发人员可以专注于业务逻辑的实现,而不是配置。易于部署:Spring Boot可以将应用程序打包成可执行的JAR或WAR文件,这样可以方便地部署到任何支持Java的平台上。易于测试:Spring Boot提供了一系列的测试工具和框架,可以方便地进行单元测试、集成测试和端到端测试。_springboot连接数据库

推荐文章

热门文章

相关标签