2.选择器

最新推荐文章于 2022-10-01 21:58:01 发布
最新推荐文章于 2022-10-01 21:58:01 发布
阅读量236 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/P_ning/article/details/90676799
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
	#study{
		font-size:40px;
		color:#0FF;
	}
</style> 
</head>

<body>
<a id="study">样式1</a>

<!--id属性和class一样为全局属性-->
<!--
与class不同的是class能使用多次,
但id是唯一的象征,尽量只是用一次,虽然所可以强行使用两次,但这就失去了它原有的意义
-->
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<style type="text/css">
	p,a,div{
		font-size:40px;
		color:#C39;
	}
</style>
<!--p,a,div标签都变化-->
</head>

<body>
<div>样本1</div>
<a>样本2</a>
<p>样本3</p>

<p><a>样本4</a></p>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
	.c a{
		font-size:40px;
		color:#306;
	}
	/*表示在某个属性(类,标签)里的后代元素全以这种格式显示*/
	/*用空格隔开*/
	/*这里表示类选择器c里面的a标签全以这个格式显示*/
</style>
</head>

<body>
<p class="c">
<a>样本1</a>
<a>样本2</a>
<a>样本3</a>
<p>样本4</p>
</p>

</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>交集选择器</title>
<style type="text/css">
	p.c{
		font-size:40px;
		color:#C39;
	}
</style>
<!--p标签里有类c变成该模式输出-->
<!--与空格不同的是,如果有空格表示的是p标签下,只要有类c的标签都变成该模式输出,
没空格是p标签里有类c才变成该模式输出-->
</head>

<body>
<p class="c">样式</p>
<!--如果是空格,此处不会变化-->


<p>
<a class="c">样式</a>
</p>
<!--如果是空格,此处会变化-->
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类型选择器</title>
<!--**********************-->
<style type="text/css">
	
	a{
		font-size:40px;
		color:#0CF;
		}
</style>
<!--*********************-->
</head>

<body>
<a>样式</a>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
	.study{
		font-size:40px;
		color:#0FF;
		}
		<!--.后面代表是类属性的选择器-->
</style>
</head>

<body>
<a class="study">a标签有设class</a><!--class是一个全局属性,及哪个标签都可用-->
<a>a标签无设置class</a>
<p class="study">其他有class的标签</p>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>冒号动作选择器</title>
<style type="text/css">
	a:hover{
		font-size:40px;
		color:#F09;			
	}
	<!--hover:鼠标移到上面后会出现的显示或操作-->
	<!--hover只是其中一个属性,还有很多-->
</style>
</head>

<body>
<a>样式</a>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
	[href]{
		font-size:40px;
		color:#C39;
	}
<!--中括号内填属性-->
</style>
</head>

<body>
<a href="属性选择器.html">样式</a>
<!--href为超链接-->
<!--
如果只想该属性的某个值才有这个样式
可以在中括号的属性后中加上等于号和这个属性的值
例如[href="属性选择器.html]
-->
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>所以选择器</title>
<style type="text/css">
	*{
		font-size:40px;
		color:#0FF;
	}
</style>
</head>

<body>

<a>样式1</a>
<p>样式2</p>
<h1>样式3</h1>
<!--选择所有标签,覆盖原来标签的相关属性,-->

</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通用兄弟元素选择器</title>
<style type="text/css">
	p~a{
		font-size:40px;
		color:#C39;
	}
</style>
<!--若p和a标签有共同的父元素,将p标签后的所有a标签都变成该模式输出-->
</head>

<body>
<p>样本1</p>
<a>样本2</a>
<p>样本3</p>
<p>样本4</p>
<span>***</span>
<a>样本5</a>
</span>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
	a:link{
		font-size:40px;
		color:#C39;
	}
	a:visited{
		font-size:40px;
		color:#FFC;
	}
	a:hover{
		font-size:40px;
		color:#F09;
	}
	a:active{
		font-size:40px;
		color:#339;
	}
	<!--伪类选择器是用:		-->
	<!--类选择器是.				-->
<!--link(鼠标未点时),visited(鼠标点击后),hover(鼠标移到上面未点击),active(鼠标点击未松开),一共4个-->
</style>
</head>

<body>
<a href="http://www.baidu.com/">百度</a>
<!--如果想4个标签中调出几个搭配使用就必须按顺序来口诀"lv ha"-->
<!--实际上,在做这些点击时,我们只会时候link和hover这两个,不会这么繁琐
	甚至有先写一个定义初始化的,然后再写一个hover,参考京东-->
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>相邻兄弟元素选择器</title>
<style type="text/css">
	p+a{
		font-size:40px;
		color:#C39;
	}
</style>
<!--若p和a标签有共同的父元素且p与a相邻,将p标签后的a标签都变成该模式输出-->
</head>

<body>
<span>
<p>样本1</p>
<a>样本2</a>
<p>样本3</p>
<p>样本4</p>
<span>***</span>
<a>样本5</a>
</span>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子代选择器</title>
<style type="text/css">
	.c>a{
		font-size:40px;
		color:#0FF;
	}
</style>
<!--后代选择器会将后面的所有的后代元素都改变
子类选择器只会改变自己后代元素中的一级子代元素,孙代元素是不发生变化的-->
<!--上面的意思是修改类c中的子代a标签的元素格式-->
</head>

<body>
<p class="c">
<a>样式</a>
<a>样式</a>
<a>样式</a>
<span><a>样式</a></span>
<a>样式</a>
<a>样式</a>
<a>样式</a>
</p>
</body>
</html>
P_ning
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初识Html基础
m0_54373495的博客
05-26 417
1. 初始HTML 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 网页主要由三部分组成： 结构（ Structure） 、 表现（Presentation） 和行为（Behavior） HTML —— 结构， 决定网页的结构和内容（ “是什么”） CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”） JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”） 2. 网页基本信息 3. 网页
三种基本选择器
是略不是咯的博客
08-04 970
三种基本选择器 标签选择器 类选择器 id选择器 标签选择器：使用标签，例如<p>标签，表示选中所有的<p>标签 p{ color:red; } **类选择器：**使用该标签会选中所有带有class标记的元素 .tag{ color:red; } <p class="tag"> 示例1 </p> <p class="tag"> 示例2 </p> **id选择器：**只能有一个唯一的id，选中指定的id
前端入门HTML篇
qq_44354408的博客
08-04 810
HTML是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。html是制作网页的基础，我们在网络营销中讲的静态网页，就是以html为基础制作的网页。 标签是什么？ HTML标签 是由一对尖括号包裹的单词构成 例如: 所有标签中的单词不可能以数字开头；标签不区分大小写 和 推荐使用小写；标签分为两部分: 开始标签 和 结束标签 ， 两个标签之间的部分，......
Html学习之八（CSS选择器的使用--属性选择器）
dhx3970的博客
03-30 597
一、前缀属性选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性选择器的使用（前缀）</title> <style type="text/css"> ...
HTML 基本选择器
m0_65066169的博客
10-01 2059
里面要加 id="你起的名字".我这里写的a,一定要加#号。使用类选择器的时候如上面我写的一个
CSS选择器.docx
07-15
2. 元素选择器 (E)：通过元素名称选取特定类型的元素，如`div`选择所有`<div>`元素。 3. ID选择器 (`#idName`)：通过ID属性选取唯一元素，ID在文档中应是唯一的。 4. 类选择器 (`.className`)：选择class属性包含...
个人封装选择器.zip
07-11
在这个"个人封装选择器.zip"文件中，我们可能找到了一个由个人开发者编写的自定义选择器实现，该选择器可能有两级或三级结构，这意味着它可以处理具有层次关系的数据，如类别、子类别和孙类别。这样的选择器常见于...
ios-时分选择器.zip
07-11
"ios-时分选择器.zip"是一个这样的案例，它提供了自定义的时分选择器，允许用户方便地选取时间。这个自定义组件可能是基于Swift或Objective-C实现的，用于替代系统默认的UIDatePicker，以实现更加个性化或者更符合...
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
日期时间选择器.rar
06-16
"日期时间选择器.rar"这个压缩包文件很可能包含了用于Android应用中的自定义日期时间选择器组件，名为"CustomDatePicker-update_20181221"，这个更新可能在2018年12月21日发布。下面我们将深入探讨Android Studio中...
前端学习笔记：CSS学习之选择器篇
Lucifer__hell的博客
03-14 555
一、初识选择器 1、语法： 选择器{ /* 注意添加“;” */ 样式; } exp: body { font-size: 12px; color: red; } 二、标签选择器 标签选择器其实就是html代码中的标签。如<html>、<head>、<img>、<p>等。 exp: <!DOCTYPE html> <html> <head> <meta c
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
热门推荐
u014497548的博客
06-03 55万+
Title img,div,body{margin: 0;padding: 0;} .orgindiv {width: 200px;height: 200px;position: relative;float: left;margin-left: 100px;} .orgindiv img{width: 100%;height: 100%;}
CSS3快速入门：二、CSS选择器
xfjssaw的博客
03-29 1836
CSS选择器 在 CSS 中，选择器是选取需设置样式的元素的模式。 CSS系列文章目录 1.CSS3快速入门：一、三种CSS导入方式
HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
weixin_34402408的博客
01-23 592
HTML5的&lt;!doctype&gt;声明怎么写 这是HTML 4.01的doctype： &lt;!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; XHTML 1.0的doctype。它的长度跟HTML 4.01的差不太多： &lt;!...
web---HTML基础知识
Allure泽宇的博客
06-11 5452
HTML基础知识内容总结
HTML的标签与选择器
weixin_49689284的博客
08-11 1563
div和span标签 语法： <div>.....</div> 效果：换行 <span>....</span> 效果：无 注意： 1，div由于只有换行效果所以无需修改默认样式就能将内容块级化（独占一行）。所以div又称为块级标签/块级元素。其他块级标签有：h1~h6，p，blockquote…【它们都能独占一行】 2，span没有效果，所以内容没有块级化（不会独占一行），所以span又称为行内标签/行内元素/内联元素。其他行内标签：font，a… 3,一般
【Web笔记】Html学习手册
qq_37443884的博客
11-26 1589
HTML简介 HTML是**超文本标记语言（HyperText Markup Language）**的简称 HTML的前世今生 从初期的网络诞生后，已经出现了许多HTML版本: 版本 发布时间 HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML...
选 择 器
qq_46423017的博客
09-18 7524
1、三种基本选择器（重要） （1）基本选择器 （2）类选择器 class （3）id选择器 2、层次选择器 （1）后代选择器 （2）子选择器 （3）相邻兄弟选择器 （4）通用选择器 3、结构伪类选择器 （1）这个就是ul的第一个元素 （2）这个是ul的最后一个元素 （3）选中p1 ：定位到父元素，选择当前的第一个元素 （4）如果第一个标签不是p，则就无效 （5）需要修改的话则要把nth-child(1)改成nth-child(2) （6）选中父元素，下的p元素的第二个，类型
CSS 选择器(div+p)(div~p)
houyanhua1的专栏
03-21 8551
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; div+p { /*div后面紧跟着的第一个p标签(必
2. CSS选择器有哪些？其语法结构？
最新发布
05-05
2. ID选择器：通过元素的id属性来选择元素，使用“#”符号+id名称的方式，如#header。 3. 类选择器：通过元素的class属性来选择元素，使用“.”符号+class名称的方式，如.header。 4. 属性选择器：通过元素的属性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值