css选择器简单介绍

最新推荐文章于 2022-07-26 21:15:00 发布
最新推荐文章于 2022-07-26 21:15:00 发布
阅读量227 收藏
点赞数
分类专栏： javaScript/jquery 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kevin_love_it/article/details/78546400
版权

css中的选择器

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title > css selector</title>
<style type="text/css">
	/* 元素选择器 */
	h2 {color:green;}

	/* 分组选择器 */
	div,p {
		background-color:#dcdcdc;
	}	

	/* 类选择器 */
	.redfont {
		color:red;
	}

	/* text-transform样式使用结合类选择器 */
	h1 {text-transform: uppercase}
	p.uppercase {text-transform: uppercase}
	p.lowercase {text-transform: lowercase}
	p.capitalize {text-transform: capitalize}

	/* 属性选择器 */
	input[value] {
		color: #029AE5;
		font-weight: bolder;
		font-family: "微软雅黑";
		font-size: 26px;
	}

	/* ID选择器 */
	#id02 {
		font-family: "Times New Roman", Times, serif;
		font-size: 36px;
	}

	/* 后代选择器 */
	h3 em {
		font-family: "黑体";
		font-size: 24px;
		line-height: 1.5em;
		color: #FC531F;
	}

	/* 子元素选择器 */
	table.querytable tr > td {
		background-color: green;
	}

	/* 相邻兄弟选择器 */
	li + li {
		font-weight:bold;
	}

	/* 伪类 */
	a:link {color: #FF0000}		/* 未访问的链接 */
	a:visited {color: #00FF00}	/* 已访问的链接 */
	a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
	a:active {color: #0000FF}	/* 选定的链接 */

	/* 伪类举例2 */
	/* p:first-child {font-weight: bold;}
	li:first-child {text-transform:uppercase;}
	p:first-child {font-weight: bold;}
	li:first-child {text-transform:uppercase;} */

	/* 伪元素 */
	/*
		:before
		:after
		:first-line
		:first-letter
	*/
	p.article:first-letter {
		color: #ff0000;
		font-size:xx-large
	}
</style> 
</head> 
<body>
	<h2>1.元素选择器</h2> 
	<div style = "width:100%;">
		hello
	</div>
	<h2>2.类选择器</h2> 
	<div style = "width:100%;">
		<p class="redfont">hello</p>
		
		<!-- text-transform使用 -->
		<h1>text-transform</h1>
		<p class="uppercase">this uppercase</p>
		<p class="lowercase">this lowercase</p>
		<p class="capitalize">this capitalize</p>
	</div>
	<h2>3.属性选择器</h2> 
	<div style = "width:100%;">
		<input id="id01" type="text" value="test" />
	</div>
	<h2>4.ID选择器</h2> 
	<div style = "width:100%;">
		<p id="id02">hello world</p>
	</div>
	<h2>5.后代选择器</h2> 
	<div style = "width:100%;">
		<h3>
			<em>后代选择器</em>
		</h3>
	</div>
	<h2>6.子元素选择器</h2> 
	<div style = "width:100%;">
		<table class="querytable">
			<tr>
				<td>张三</td>
				<td>张三</td>
				<td>张三</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>李四</td>
				<td>李四</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>王五</td>
				<td>王五</td>
			</tr>
		</table>
	</div>
	<h2>7.相邻兄弟选择器</h2> 
	<div style = "width:100%;">
		<ul>
			<li>list11</li>
			<li>list12</li>
			<li>list13</li>
		</ul>
		<ol>
			<li>list21</li>
			<li>list22</li>
			<li>list23</li>
		</ol>
	</div>
	<h2>7.伪类</h2> 
	<div style = "width:100%;">
		<p><b><a href="../index.html" target="_blank">这是一个链接。</a></b></p>
		<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
		<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
	</div>
	<h2>7.伪元素</h2> 
	<div style = "width:100%;">
		<p class="article">
			You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
		</p>
	</div>
	<h2>8.分组选择器</h2> 
	<div style = "width:100%;">
		hello world
	</div>
</body>
</html>
kevin_love_it
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS简介与选择器
wwh71430的博客
08-31 239
CSS简介与选择器 1.CSS简介 什么是CSS CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。 HTML和CSS之间的关系？ HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 HT
CSS之选择器基础介绍
qq_53977993的博客
10-10 86
本章主要介绍了CSS的4种基础选择器：常规选择器，复合选择器，关系选择器和属性选择器。
css各种选择器详解
小颜颜6035的博客
07-29 734
css中的各种选择器详解，不看后悔系列. 最详细的css3选择器解析 选择器是什么？ 比较官方的解释：在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。 看代码，元素选择器就是这个： h1作为一个元素标签，是最基本的选择器，这样可以对h1标签设置属性。 选择器有哪些？ 常见的选择器：元素选择器，类选择器，ID选择器，属性选择器，派生选择器， 本文的思路就是先讲讲最常用的选择器，再讲讲用得比较少的
CSS选择器介绍
cnds123的专栏
07-26 611
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。 要对HTML页面中的元素实现一对一，一对多或者多对一的控制，可用CSS 规则集（rule-set）实现，CSS 规则集也称为css样式定义
【web】CSS选择器介绍
m0_64431500的博客
12-03 591
标题1选择器 标题1.1基本选择器 应用得最广泛的四种： 1）标签选择器（根据标签名获取） 2）id选择器（根据id属性进行获取） 3）类选择器（class属性进行获取） 4）通用选择器（通配符*）（不建议） 标题 基本选择器的基本语法结构 选择器{ 属性：属性值 属性：属性值 属性：属性值 } 标题 标签选择器 实例： 标题1.2基本选择器的优先级 上述四种基本选择器是有优先级的喔！ 优先级： id选择器 > 类选择器 > 标签选择器 &..
CSS简介——选择器
mantou_riji的博客
04-10 591
文章目录内联样式 css:层叠样式，一个网页都很多层。 网页实际上是一个多层结构，通过CSS为网页的每一层设置样式，最终我们看到的只是最上面的一层。 名值对结构：名字：值 内联样式 在标签内部通过style属性来设置元素的样式。 ...
简单描述css的四种基础选择器
jt18729260336的博客
09-06 1507
选择器 作用 缺点 使用情况 用法 标签选择器 可以选出所有相同的标签，比如p 不能差异化选择 较多 p { color：red;} 类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav { color: red; } id选择器 一次只能选择器1个标签 只能使用一次 不推荐使用...
css 元素选择器的简单实例
09-24
CSS元素选择器的使用不仅仅限于单个标签，还可以结合类选择器（`.class`)、ID选择器 (`#id`)、伪类（`:hover`, `:active`, `:focus`等）和属性选择器 `[attribute]`等，实现更复杂的样式控制。例如，如果我们只想让...
CSS的相邻兄弟选择器用法简单讲解
09-24
对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:
前端css选择器练习diner.zip
04-22
"前端css选择器练习diner.zip" 是一个针对CSS选择器学习和实践的资源包，名为"css-diner"。 在"css-diner"这个练习中，你可以深入理解并掌握各种CSS选择器的用法，从而提升你的前端开发技能。以下是一些关于CSS选择...
深入理解CSS 选择器
09-22
深入理解CSS选择器是网页设计和开发中至关重要的一部分，它决定了如何精确地选取并样式化网页元素。在本文中，我们将探讨CSS选择器的各种类型及其用法，通过实例代码帮助你更好地掌握这些概念。 首先，选择器是CSS...
CSS3选择器介绍及用法总结
尐轩web前端网络日志
11-16 6995
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注： ele代表element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器 有名字的选择器我尽量细分了CCS1选择器 选择器 类型 示例 说明 .class 类选择器 .demo
CSS选择器简介
不是我的博客
08-01 249
CSS语法： 选择器{属性1：值1;属性2：值2;.....} 选择器的几种类型： HTML选择器： P{color:red} ID选择器： #test{color:red} 类选择器： .test{color:red} 还有一个属性选择器： 对带有指定属性的HTML元素设置样式 用法： [align=center]{color:red} 例： 哈哈 p
CSS中选择器的介绍
qq_39746820的博客
03-29 629
CSS中选择器的介绍
css选择器的详细介绍
邻家小哥哥的博客
11-04 211
css作用：很好的将结构与表现进行分离； css样式的三种表现形式： 行内样式 通过style属性将样式写入标签中 内嵌样式 通过style标签将样式写入head标签中 通过link标签引入外部css文件夹中css样式 *块元素*：会占据文档中一行显示，即使设置宽也会占据一行； div: 没有具体含义，用于页面的布局，替代了原始的table与框架布局； 一：行内样式...
Selenium - CSS 选择器简介
cjeric的博客
02-05 4804
Selenium定位的两大利器非xpath和css selector莫属了，熟练掌握任何一种都能解决绝大部分的定位问题。上一篇简单介绍了一下xpath，这次就讲讲css selector， 但是个人并不太喜欢这种方式，觉得可读性上没有xpath那么清晰。老样子更多的理论知识请移步w3school，这里主要通过举例帮助大家运用。 首先何为CSS, CSS指层叠样式表（Cascading Styl
css选择器介绍
cqqorcq的博客
06-28 970
1.2 选择器1.2.1 标签选择器 html 标签名 {属性:值;} 常用的属性: color             前景色(文字颜色) background-color   背景色 font-size         设置文字大小 width                   ...
CSS选择器有哪些
羽筠的博客
05-10 6684
CSS选择器有哪些 **通用选择器：选择所有元素，不参与计算优先级*，兼容性IE6+ #X id选择器：选择id值为X的元素，兼容性：IE6+ .X 类选择器： 选择class包含X的元素，兼容性：IE6+ X Y后代选择器： 选择满足X选择器的后代节点中满足Y选择器的元素，兼容性：IE6+ X 元素选择器： 选择标所有签为X的元素，兼容性：IE6+ :link，：visite
爬虫中的css选择器
最新发布
04-20
下面是一个简单的示例，演示如何在爬虫中使用CSS选择器： 假设我们要从一个网页中提取所有的标题文本，可以使用以下代码： ```python import requests from bs4 import BeautifulSoup # 发送请求获取网页内容 url...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值