CSS选择器详解

最新推荐文章于 2023-07-16 18:10:19 发布
最新推荐文章于 2023-07-16 18:10:19 发布
阅读量526 收藏 4
点赞数 2
分类专栏： 前端 文章标签： CSS选择器 CSS 伪类选择器 伪元素选择器 结构选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32925031/article/details/89893807
版权

(1)#### (1)结构伪类选择器

1):first-child、:last-child、:nth-child(index)、:nth-last-child(index)

先创建一个列表：

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>

接下来选中元素添加背景色：

	ul li{
			margin-bottom: 10px;
		}
		ul li:first-child{
			background-color: #ccc;
		}
		ul li:last-child{
			background-color: lightpink;
		}

		ul li:nth-child(2){	/*从1开始计数*/
			background-color: lightgreen;
		}

		ul li:nth-last-child(2){
			background-color: lightblue;
		}

此时在浏览器中的显示效果为：

在这里插入图片描述

2):nth-child(odd|even)
	ul li:nth-child(even){
			background-color: yellow;
		}

		ul li:nth-child(odd){
			background-color: purple;
		}

此时在浏览器中的显示效果为：

在这里插入图片描述

配合:hover()可实现各行换色的效果：

		/*隔行换色*/
		ul li:nth-child(even):hover{
			background-color: yellow;
		}

		ul li:nth-child(odd):hover{
			background-color: green;
		}

此时在浏览器中的显示效果为：

05

3):nth-child(2n)、:nth-child(2n+1)

可实现与:nth-child(odd|even)同样的效果

		/*选中奇偶行*/
		ul li:nth-child(2n){
			background-color: yellowgreen;
		}
		ul li:nth-child(2n+1){
			background-color: red;
		}

此时在浏览器中的显示效果为：

在这里插入图片描述
配合:hover()同样可以实现各行换色的效果：

		ul li:nth-child(2n):hover{
			background-color: lightpink;
		}

		ul li:nth-child(2n+1):hover{
			background-color: lightgreen;
		}

在浏览器中的显示效果为：

在这里插入图片描述

4):nth-last-child(-n+index)

这里n是从1开始的，取n的相反数，index为多少，整体即为从最后一个算起往上取几个数。如想要选取最后一个和倒数第二个元素，则选择器应为:nth-last-child(-n+2)

		/*选中最后两个元素*/
		ul li:nth-last-child(-n+2){
			background-color: orange;
		}

在浏览器中的显示效果为：

在这里插入图片描述

(2)链接伪类

针对的不同状态进行取值，实现效果

a:link|visited|hover|active 依次分布表示链接未访问、已访问、鼠标悬停、鼠标按下时的状态

(3)交集、并集选择器

先添加html标签

	<div class="first">
		<p>Talk is easy,show me the code!</p>
	</div>
	<div class="second">
		<p>Talk is easy,show me the code!</p>
	</div>
	<div class="third">
		<span>Talk is easy,show me the code!</span>
	</div>
	
	<h2>Talk is easy,show me the code!</h2>
	<h1>Talk is easy,show me the code!</h1>

使用交集、并集选择器选中元素，然后添加样式：

		div{
			height:20px;
			background-color: #ccc;
			margin-bottom: 10px;
		}
		/*交集选择器*/
		div.first{
			color:red;
		}
		/*并集选择器*/
		span,h1,h2{
			color: green;
		}

在浏览器中的显示效果为：

在这里插入图片描述

(4)后代、直接后代选择器

区别在于：后代选择器包括其子选择器中嵌套的元素，而直接后代选择器则不包含子选择器中嵌套的元素

	<div class="frist">
		<div>
			<h1>Talk is easy,show me the code!</h1>
		</div>
		<h1>Talk is easy,show me the code!</h1>
	</div>

选中’class=frist’的div的后代为其添加背景色，选中其直接后代为字体添加颜色：

		/*后代选择器*/
		.frist h1{
			background: lightblue;
		}
		/*直接后代选择器*/
		.frist > h1{
			color:red;
		}

在浏览器中的显示效果为：

在这里插入图片描述

(5)属性选择器

[attr]包含某属性

[type=attr]包含某属性，且值等于指定值

	<input type="text" checked="checked">
	<input type="text">
	<input type="submit">

添加CSS样式：

		input[checked]{
			background-color: red;
		}
		input[type=submit]{
			background-color: lightgreen;
		}

在浏览器中的显示效果为：

在这里插入图片描述

[type^=attr]属性以给定值开头

[type$=attr]属性以给定值结尾

[type*=attr]属性包含给定字段

	<div class="flten">
		<h1>Talk is easy,show me the code!</h1>
	</div>
	<div class="fltenwall">
		<h1>Talk is easy,show me the code!</h1>
	</div>
	<div class="itfltenwall">
		<h1>Talk is easy,show me the code!</h1>
	</div>

选中class以"flten"开头的元素，并设置背景色：

	div[class^=flten]{
			background-color:#ccc;
		}

在浏览器中的显示效果为：

在这里插入图片描述

再上面的基础上再选中class以"flten“结尾的元素，并设置字体颜色：

	div[class$=wall]{
			color:blue;
		}

在浏览器中的显示效果为：

在这里插入图片描述
再上面的基础上再选中class包含"flten“字段的元素，并设置字体大小：

	div[class*=ten]{
			font-size:24px;
		}

在浏览器中的显示效果为：

在这里插入图片描述

(6)伪元素选择器

从形式上区别伪元素选择器与伪类选择器，一个是":"，一个是"::"

1)::first-letter

选中文本第一个字符，常用于设置首字母下沉

<p>Talk is easy,show me the code!</p>

给上面

的文本设置首字母下沉：

		p::first-letter{
			font-size:50px;
			color:blue;
			float: left;
			line-height: 50px;
		}

在浏览器中的显示效果为：

在这里插入图片描述

2)::first-line

选中文本首行

<p>JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了......在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系。</p>

给上面

的文本首行设置样式：

	p::first-line{
			font-size:18px;
			color:lightgreen;
		}

在浏览器中的显示效果为：

在这里插入图片描述

3)::before和::after

分布表示在给定元素前后添加内容：

<p>Talk is easy,show me the code!</p>

给上面

标签前后都添加文本：

	p::before{
			content:'这是添加在前面的内容';
			color:blue;
		}
		p::after{
			content:'这是添加在后面的内容';
			color:red;
		}

在浏览器中的显示效果为：

在这里插入图片描述

::after和也常用于解决float引起的问题，用于清除浮动带来的影响

4)::selection

用于将选中的文本突出显示，仅有两个属性值:color和background

<p>JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了......在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系。</p>

为这段文本添加::selection伪元素：

	::selection{
			color:red;
		}

在浏览器中显示效果为：

在这里插入图片描述

fltenwall
关注
专栏目录
前端开发：CSS选择器详解
软贱开发攻城狮
11-04 1383
做前端开发的都知道，CSS的选择器常用的大概分为五类：元素选择器、id选择器、类选择器、属性选择器、伪类选择器。而且CSS的选择器也是根据优先级顺序来执行的，实际开发中会根据业务场景的需要结合选择器的顺序，来选择使用选择器。本章博文就来分享一下常用的CSS的选择器中的各个选择器的具体知识点，总结一下，方便查阅使用。通过本文关于CSS。
selenium 之css选择器详解 ：单个选择器、组合选择器、兄弟节点选择、属性元素选择
wudada1993的博客
06-02 3739
CSS选择器是浏览器用来选择页面元素，执行效率比较高 以下内容有： 根据id选择 根据class选择 根据tag标签选择 根据后代元素选择 根据子元素选择 根据组（group）选择 1、根据id选择 比如根据这个百度输入框的 id driver.find_element_by_css_selector('#kw') #css根据id选择元素，元素前面加一个# 2 、根据class 选择 比如根据“百度一下”这个的元素来定位，该元素的class=‘bg s_btn_wr’
json校验，格式化，显示报错所在行数并标红
05-25
json校验工具，支持 1.json字符串格式化 2.json格式错误报错，找出报错所在行并标出
css选择器详解
编程之路
03-24 462
标签选择器 渲染所有的指定的标签。 *　以下例子渲染所以的span <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style> span { ...
十种CSS选择器详解介绍
最新发布
01-31
### 十种CSS选择器详解介绍 #### 一、通用选择器 - **定义**: 通用选择器使用星号 `*` 来表示，能够匹配HTML文档中的每一个元素。 - **示例**: ```css * { margin: 0; padding: 0; } ``` - **用途**: 常用于...
CSS属性选择器详解.pdf
02-28
CSS属性选择器详解 CSS中的属性选择器是一种强大的选择器，允许开发者根据HTML元素的属性值来选择元素。今天，我们将深入探讨CSS属性选择器的详细解释。 什么是CSS属性选择器？ --------------------- CSS属性...
CSS选择器种类、优先级与匹配原理详解
09-25
CSS选择器从基本类型上可以分为三类：标签名选择器、类选择器和ID选择器。 标签名选择器是直接使用HTML标签名作为选择器。比如，`p` 就是一个标签名选择器，它会选择页面中所有的`<p>`元素，并对它们应用相应的样式...
CSS 选择器详解
m0_50953782的博客
02-02 170
比较优先级时，需要将所有的选择器元素的优先级进行相加计算，最后优先级越高，越优先显示（分组选择器是单独计算的），选择器的累加不会超过其最大的数量级，如类选择器再高也不会超过id选择器。当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同样式，当样式发生冲突时应用哪个样式由选择器的权重（优先级）决定。伪类（不存在的类，特殊的类）用来描述一个元素的特殊状态，如被点击的元素、鼠标移入的元素、第一个子元素。语法：选择器1，选择器2，选择器3，选择器n{}[属性名*=]选择属性值中含有某值的元素的元素。
CSS选择器详解（总结）
White feathe 的博客
04-17 1488
一、CSS选择器。a、基本选择器详解。 名称 语法构成 描述 返回值 示例 标签选择器 element 根据给定的标签名匹配元素 元素集合 $(“h2”)选取所有的h2元素 类选择器 .class 根据给定的class匹配元素 元素集合 $(“.title”)选取所有class为title的元素 ID选择器 id 根据给定的
json格式校验并显示错误_【快学springboot】4.接口参数校验
weixin_39760619的博客
11-26 542
前言在开发接口的时候，参数校验是必不可少的。参数的类型，长度等规则，在开发初期都应该由产品经理或者技术负责人等来约定。如果不对入参做校验，很有可能会因为一些不合法的参数而导致系统出现异常。上一篇文章讲了多种接受参数的方法【快学springboot】3.多种接受参数的方式。因为目前json类型的参数是最常用的，所以这里只讲解json类型的参数校验。其他类型的大同小异。新建一个Param.javapu...
json 格式化工具_格式化展示，校验错误，编辑JSON，这几个JSON工具一定不能错过...
weixin_39710106的博客
11-29 321
今天给大家介绍几个常用JSON的工具，基本上能满足你工作中对JSON的所有需求google插件 JSONView安装好插件后，格式化接口返回的JSON，还能展开节点和关闭节点，超级方便格式化本地JSON，检验错误JSON Viewer网页版将杂乱的JSON放在左边，右边就是格式化好的JSON网址：https://codebeautify.org/jsonviewer还可以将JSON保存为XML 和...
详解css选择器
weixin_68613594的博客
07-16 1181
其中浏览器获取到了id为a2,a3,a4,a5的div标签，他们的父元素都是a1，而a1的最后一个子元素是p，不是div，所以无效。而first-of-type选择器则是选择父元素中第一个与指定类型相同的子元素，也就是说，如果父元素中有多个相同类型的子元素，只有第一个会被选择。通配符选择器用*号表示，*就是选择所有的标签 他是所有选择其中作用范围最广的，能匹配页面中所有的元素。first-child选择器选择的是父元素的第一个子元素，无论这个子元素是什么类型的元素。not，就是“非，不是” 的意思。
jQuery CSS选择器详解与应用示例
"这篇内容主要介绍了jQuery中的CSS选择器，帮助开发者更精确地定位和操作DOM元素。内容包括六种属性选择器的详细解释和应用示例，如根据元素属性值、以特定值开始或结束等进行选择。" 在jQuery中，CSS选择器是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值