常用的CSS3选择器

常用的CSS3选择器常用的CSS选择器CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。伪选择器比较特殊,分为伪元素和伪类元素两种。一、属性选择器1.E[att^=value]属性选择器E[att^=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的,如果省略则表示可以匹配…

大家好,又见面了,我是你们的朋友全栈君。

CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。
在这里插入图片描述

伪选择器比较特殊,分为伪元素和伪类元素两种。


在这里插入图片描述

一、属性选择器

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

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

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

二、关系选择器

1.子代选择器(>)
子代选择器主要用来选择某个元素的第一级子元素。例如希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:h1 > strong。
2.兄弟选择器(+、~)
兄弟选择器用来选择与某元素位于同一个父元素之中,且位于该元素之后的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。
(1)临近兄弟选择器
该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素。
(2)普通兄弟选择器
普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲,但第二个元素不必紧跟第一个元素。

三、结构化伪类选择器

  1. :root选择器
    :root选择器用于匹配文档根元素,在HTML中,根元素始终是html元素。也就是说使用“:root选择器”定义的样式,对所有页面元素都生效。对于不需要该样式的元素,可以单独设置样式进行覆盖。
  2. :not选择器
    如果对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,可以使用:not选择器。
    如: body *:not(h3)
  3. :only-child 选择器
    :only-child 选择器用于匹配属于某父元素的唯一子元素的元素,也就是说,如果某个父元素仅有一个子元素,则使用“:only-child 选择器”可以选择这个子元素。
  4. :first-child和:last-child选择器
    :first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。
  5. :nth-child(n)和:nth-last-child(n)选择器
    使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素,但是如果用户想要选择第2个或倒数第2个子元素,这两个选择器就不起作用了。为此,CSS3引入了:nth-child(n)和:nth-last-child(n)选择器,它们是:first-child选择器和:last-child选择器的扩展。
  6. :nth-of-type(n)和:nth-last-of-type(n)选择器
    在上一节介绍了:nth-child(n)和:nth-last-child(n)选择器,并实现了一些简单的页面效果,本节将引入:nth-of-type(n)和:nth-last-of-type(n)选择器,这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第 n 个子元素和倒数第n个子元素,而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第 n 个子元素和倒数第n个子元素,与元素类型无关。
    :nth-of-type的值还可以设为odd或2n-1(奇数),even或2n(偶数),即为选择所有排序为奇数或偶数的元素
  7. :empty选择器
    :empty选择器用来选择没有子元素或文本内容为空的所有元素。
  8. :target选择器
    :target选择器用于为页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式。只有用户单击了页面中的超链接,并且跳转到target元素后,:target选择器所设置的样式才会起作用。
    PS:在用<p>标签进行嵌套时要注意,<p>标签不能嵌套块级元素甚至不能嵌套<p>元素,只能嵌套内联元素,不然对<p>嵌套的块级元素设置CSS不起作用。
    比如:用:only-child选择器来修饰<p>的嵌套元素,看是否起作用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1:only-child{ 
   
				color: red;
			}
			li:only-child{ 
   
				color:red;
			}
		</style>
	</head>
	<body>
		<p>
			<h1>星际穿越</h1>
		</p>
		<ul>
			<li>海贼王</li>
		</ul>
		<ul>
			<li>斗罗大陆</li>
			<li>武庚纪</li>
			<li>斗破苍穹</li>
		</ul>
	</body>
</html>

页面效果:
在这里插入图片描述
效果很明显,嵌套在<p>元素里面的子元素<h1>字体颜色没有变红,说明<p>嵌套的块级元素设置CSS不起作用.

四、伪元素选择器

1.:before选择器
:before伪元素选择器用于在被选元素的内容前面插入内容,必须配合content属性来指定要插入的具体内容。其基本语法格式如下:
<元素>:before
{

content:文字/url();
}
在上述语法中,被选元素位于“:before”之前,“{}”中的content属性用来指定要插入的具体内容,该内容既可以为文本也可以为图片。
2.:after选择器
:after伪元素选择器用于在某个元素之后插入一些内容,使用方法与:before选择器相同。

五、链接伪类

1.链接伪类
在CSS中,通过链接伪类可以实现不同的链接状态。所谓伪类并不是真正意义上的类,他的名称是由系统定义的,通常由标记名、类名或id名加“:”构成。超链接标记<a>的伪类有4种,具体如下表所示。
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157226.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 他们做了个艰难的决定

    他们做了个艰难的决定
    可口可乐做了个艰难的决定,如果监测到用户胃里有百事可乐,将自动释放农药和汞。
    中石化做了个艰难的决定,如果监测到用户汽车油箱里有中石油,将自动释放电火花。
    肯德基做了个艰难的决定,如果监测到用户吃过有麦当劳,将自动释放牛屎。
    百度做了个艰难的决定,如果监测到用户浏览Google,将自动封禁百度ID。。。
    联通做了个艰难的决定,如果方圆百米内检测到有移动用户将使这些用户不间断自动拨打110
    郭小四做了一个艰难的决定,如果发现读者的脑袋里

  • navicat 激活码【注册码】「建议收藏」

    navicat 激活码【注册码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 第三章《数据表的基本操作》

    第三章《数据表的基本操作》

  • Spring Boot实现MyBatis分页查询[通俗易懂]

    Spring Boot实现MyBatis分页查询[通俗易懂]综合概述想必大家都有过这样的体验,在使用Mybatis时,最头痛的就是写分页了,需要先写一个查询count的select语句,然后再写一个真正分页查询的语句,当查询条件多了之后,会发现真的不想花双倍的时间写count和select,幸好我们有pagehelper分页插件,pagehelper是一个强大实用的MyBatis分页插件,可以帮助我们快速的实现MyBatis分页功能,而且pagehelper有个优点是,分页和Mapper.xml完全解耦,并以插件的形式实现,对Mybatis执行的.

  • 数据库连接方案比拼

    数据库连接方案比拼

  • slam技术是什么_技术文小说

    slam技术是什么_技术文小说什么是SLAM?SLAM(simultaneouslocalizationandmapping),也称为CML(ConcurrentMappingandLocalization),即时定位与地图构建,或并发建图与定位。问题可以描述为:将一个机器人放入未知环境中的未知位置,是否有办法让机器人一边逐步描绘出此环境完全的地图,同时一边决定机器人应该往哪个方向行进。例如扫地机器人就是一个很典型的SLAM问题,所谓完全的地图(aconsistentmap)是指不受障碍行进到房间可进入.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号