ICode9

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

CSS选择器

2021-11-18 18:03:14  阅读:147  来源: 互联网

标签:元素 value att child 选择器 CSS 属性


1.属性选择器

1.E[att^=value]属性选择器

E[att^=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的,如果省略则表示可以匹配满足条件的任意元素。

例如,div[id^=section]表示匹配包含id属性,且id属性值是以“section”字符开头的div元素。

2.E[att$=value]属性选择器

E[att$=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含后缀为value的子字符串。与E[att^=value]一样,E是可以省略的,如果省略则表示可以匹配满足条件的任意元素。

例如,div[id$=section]表示匹配包含id属性,且id属性值是以“section”字符串结尾的div元素。

3.E[att*=value]属性选择器

E[att*=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含value子字符串。该选择器与前两个选择器一样,E是可以省略的,如果省略则表示可以匹配满足条件的任意元素。

例如,div[id*=section]表示匹配包含id属性,且id属性值包含“section”字符串结尾的div元素。

2.关系选择器

1.子代选择器

子代选择器主要用来选择某个元素的第一级子元素。

例如希望选择只作为h1元素子元素的strong元素,可以这样来写:h1> strong。

示例:

2.兄弟选择器

1.临近兄弟选择器

 该选择器使用“+”来连接前后两个选择器。选择器中的两个元素同有一个父亲,而且第二个元素必须紧跟着第一个元素。

示例:

 

 从代码和效果可以看出只有跟p元素紧邻的下一个h2元素应用了设置的样式。

 2.普通兄弟选择器

该选择器使用“~”来连接前后两个选择器。选择器中的两个元素同有一个父亲,而且第二个元素不必紧跟着第一个元素。

示例:

 从效果可以看出,p元素的所有兄弟h2都应用了代码中的设定样式 。

3.结构化伪类选择器

1. :root选择器

:root选择器用于匹配文档根元素,在HTML中,根元素始终是html元素。也就是说使用 :root选择器定义的样式,对所有页面元素都生效。对于不需要该样式的元素,可以单独设置样式进行覆盖。

2. :not选择器

如果对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,可以使用:not选择器。

3. :only-child 选择器

这个选择器用于匹配属于某父元素的唯一子元素的元素,也就是说,如果某个父元素仅有一个子元素,则用该选择器选择这个子元素。

4. :first-child和  :last-child 选择器

这两个选择器中的第一个用于选择父元素的第一个子元素,第二个选择器用于选择父元素的最后一个选择器。

5. :nth-child(n) 和 :nth-last-child(n)选择器

:first-child和 :last-child,这两个选择器可以选择某个父元素中的第一个或最后一个子元素,但是如果用户想要选择第二个或倒数第二个子元素,这两个选择器就不起作用了。为此引进了:nth-child(n) 和 :nth-last-child(n)选择器,他们是:first-child和  :last-child选择器的扩展。

6.:nth-of-type(n)和:nth-last-of-type(n)选择器

这两个选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素,而:nth-child(n) 和 :nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素,与元素类型无关。

7. :empty选择器

该选择器用于选择没有子元素或文本内容为空的所有元素。

8.:target选择器

该选择器用于为页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式。只用用户单击了页面中的某个超链接,并且跳转到target元素后,:target选择器所设置的样式才会起作用。

4.伪类选择器

1. :before选择器

该选择器用于在被选元素的内容前面插入内容,必须配合content属性来制定要插入到具体内容,该内容既可以是文本也可以是图片。

2.after选择器

该选择器用于在某个元素之后插入一些内容,使用方法和:before选择器相同。

标签:元素,value,att,child,选择器,CSS,属性
来源: https://www.cnblogs.com/wenwenfff/p/15569531.html

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

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

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

ICode9版权所有