ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

一些挺有用的css伪选择器

2020-07-03 10:35:27  阅读:214  来源: 互联网

标签:innerDiv color 元素 有用 type 选择器 css first


1、::first-line | 选择首行文本

这个伪元素选择器选择换行之前文本的首行

p:first-line{
  color:lightcoral;
}

2、::first-letter | 选择首字母

这个伪元素选择器应用于元素中文本的首字母

.innerDiv p:first-letter{
  color:lightcoral;
}

3、::selection | 选择高亮(被选中)的区域

应用于任何被用户选中的高亮区域

通过::selection伪元素选择器,我们可以将样式应用于高亮区域

div::selection{
  background:yellow;
}

4、:root | 根元素

:root伪类选中文档的根元素。在HTML中,为HTML元素。在RSS中,则为RSS元素。

这个伪类选择器应用于根元素,多用于存储全局css自定义属性

5、:empty | 仅当元素为空时触发

这个伪类选择器将选中没有任何子项的元素。该元素必须为空。如果一个元素没有空格、课件的元素、后代元素,则为空元素

div:empty{
  border:2px solid orange;
}

6、:only-child | 选择仅有的子元素

匹配父元素中没有任何兄弟元素的子元素

.innerDiv p:only-child{
  color:orangered;
}

7、:first-of-type | 选择第一个指定类型的子元素

.innerDiv p:first-or-type{
  color:orangered;
}

8、:last-of-type | 选择最后一个指定的类型的子元素

想:first=of-type一样,当时会应用于最后一个同类型的子元素

.innerDiv p:last-of-type{
  color:orangered;
}

9、:nth-of-type() | 选择特定类型的子元素

这个选择器将从指定的父元素的孩子列表中选择某种类型的子元素

innerDiv p:nth-of-type(1){
  color:orangered;
}

10、:nth-last-of-type() | 选择列表末尾中指定类型的子元素

.innerDiv p:nth-last-of-type(){
  color:orangered;
}

11、:link | 选择一个未访问过的超链接

这个选择器应用于未被访问过的连接。常用于带有href属性的a锚元素。

a:link{
  color:orangered;
}

12、:checked | 选择一个选中的复选框

这个应用于已经被选中的复选框

input:checked{
  border:2px solid lightcoral;
}

13、:valid | 选择一个通过验证的元素

这主要用于可视化表单元素,以让用户判断是否验证通过。验证通过时,默认元素带有valid属性

input:valid{
  border-color:lightsalmon;
}

14、:invalid | 选择一个未通过验证的元素

想:valid一样,但是会应用到未通过验证的元素

input[type="text"]:invalid{
  border-color:red;
}

15、:lang() |选择指定语言的元素

应用于指定了语言的元素

可以通过一下两种方式使用:

plang(fr){
  background:yellow;
}
p[lang|="fr"]{
  background:yellow;
}

16、:not() | 对于选择取反(这是一个运算符)

否定伪类选择器选中相反的

innerDiv :not(p){
  color:lightcoral;
}

 

标签:innerDiv,color,元素,有用,type,选择器,css,first
来源: https://www.cnblogs.com/chao202426/p/13228910.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有