网页基础（九）选择器

最新推荐文章于 2024-05-13 10:31:40 发布
最新推荐文章于 2024-05-13 10:31:40 发布
阅读量266 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41440413/article/details/104511161
版权

一.class选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<!--
        	作者：770267939@qq.com
        	时间：2020-02-26
        	描述：类选择器：给要添加样式的元素添加一个属性class
      		z在css中引用前加.
      
        -->
        <style>
        	.test1{
        		color: blue;
        		font-weight: bold;
        	}
        	.test3{
        		color: red;
        	}
        	.test2{
        		background-color: gray;
        	}
        </style>
	</head>
	<body>
		<ul>
			<li class="test1 test2">新闻</li>
			<li>视频</li>
			<li>体育</li>
			<li>娱乐</li>
		</ul>
		<ul>
			<p class="test2 test3">66666</p>
		</ul>
	</body>
</html>

二.通配符选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<!--
        	作者：770267939@qq.com
        	时间：2020-02-26
        	描述：*:代表通配符选择器 用了它以后代表当前页面所有的标签公用该样式
        	
        -->
        <style>
        	*{
        		color: red;
        		font-size: 16px;
        	}
        </style>
	</head>
	<body>
		<p>hhhhh</p>
		<h1>TMD</h1>
	</body>
</html>

三：后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后代选择器(包含选择器)</title>
		<!--
        	作者：770267939@qq.com
        	时间：2020-02-26
        	描述：选择某个元素的下一代
        	多个选择器用空格隔开
        	
        -->
        <style>
        	#menu .test1{
        		color: red;
        	}
        </style>
	</head>
	<body>
		<div id="menu">
			<h1>商品分类</h1>
			<ul class="test1">
				<li>家用电器</li>
				<li>男女服装</li>
				<li>日用百货</li>
			</ul>
		</div>
		<div>
			<h1>商品分类</h1>
			<ul>
				<li>家用电器</li>
				<li>男女服装</li>
				<li>日用百货</li>
			</ul>
		</div>
	</body>
</html>

四：选择器分组

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>选择器分组(并集选择器)</title>
    <!--并集选择器:创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素
        或者理解成将多个相同样式定义的选择器以逗号进行分组。
        语法：选择器，选择器，选择器{}-->
    <style>
        header, main {
            width: 600px;
            border: solid 1px #808080;
            color: black;
            font-family: "宋体";
        }

        header {
            height: 100px;
        }

            header nav ul li {
                float:left;
                width:100px;
                list-style-type:none;
            }

        main {
            height: 300px;
        }
        #test1, #test2 .p1{
        width:300px;
        color:red;
        font-family:Aharoni;
        background-color:aquamarine;
        }
    </style>
    <meta charset="utf-8" />
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>首页</li>
                <li>C#程序设计</li>
                <li>SQL Server</li>
                <li>ADO.NET</li>
                <li>HTML5</li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h1>国际新闻</h1>
            <p>美国开始部署萨德系统</p>
        </article>
    </main>
    <div id="test1">
        <p class="p1">山东合并批录取 部分高校预估线出炉</p>
    </div>
    <div id="test2">
        <p class="p1">景区客流直线上升 青岛旅游旺季提前“驾到”</p>
    </div>
</body>
</html>

@大娱乐家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 选择器：提高网页开发效率的利器
a451319296的博客
05-12 4080
HTML 选择器是一种用于查找特定元素的语法，根据标签名、类名、ID 等属性来筛选出符合条件的元素。在开发过程中，灵活运用各种选择器可以帮助我们更加高效地操作页面元素。本文总结了常用的HTML选择器，并提供了相关使用案例和注意事项。通过熟练掌握这些选择器的使用方式，能够提高网页开发效率，并使代码更加规范化、易于维护。
HTML5网页设计样式-基本CSS选择器
m0_66168318的博客
03-22 1594
选择器是用来定位CSS样式代码控制的对象，实现各种效果。主要包括基本选择器和复合选择器。 基本CSS选择器 1.标记选择器 每一种HTML标记的名称都可以作为相应的选择器名称，基本格式如下： 标记名称{属性1:属性值1;属性2:属性值2;} 例如，当我想给所有的<p>标签色设置相同的颜色、字体大小和背景颜色时： 2.类别选择器 标记选择器一旦声明，HTML文件中所有的相应标记都会产生变化，如果希望其中的某一个标记不产生相应的变化，这时候需要使用类别选择器（通常称为
html中选择器是什么意思,css中的选择器是什么意思？
weixin_29974217的博客
06-03 416
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。常用选择器可分为：标签名选择器，类选择器，id选择器，派生选择器，子元素选择器，分组选择器，伪元素选择器每一条css样式定义由两部分组成，形式如下：选择器{样式} ，在{}之前的部分就是“选择器”。“选择器”指明了{}中的“样式”的作用对象，也就是“...
2024年Web前端最全CSS选择器详细总结_css选择器总结(1)，Github标星25K+超火的前端实战项目
2401_84435138的博客
05-04 626
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记。
web选择器
weixin_74812184的博客
07-10 186
选择器
HTML网页设计：css选择器
少可爱
07-27 1749
一、为什么要用选择器？ 要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。 二、选择器的分类 基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（伪元素）选择器 1、基本选择器分为：类型选择器（标签选择器）、class选择器（类选择器）、ID选择器、通配符选择器（*）、群组选择器 a、类型选择器(标签选择器) 以文档对象html中的标签作为选择符 I...
css基础知识之选择器使用示例
09-25
本篇文章将深入探讨CSS选择器的基础知识和使用示例，帮助理解如何有效地控制页面的样式表现。 首先，我们要明白选择器的优先级或者说特殊性（specificity）是决定样式生效的关键因素。CSS的特殊性由四个部分组成，...
jQuery选择器基础知识
01-10
**jQuery选择器基础知识** jQuery是JavaScript的一个库，它极大地简化了DOM操作、事件处理和动画效果。其中，选择器是jQuery的核心功能之一，用于高效地选取DOM元素，从而实现对网页内容的控制和操作。本篇文章将...
HTML5&CSS3网页制作：CSS基础选择器.pptx
05-31
下面，我们将详细讨论四种基础选择器： 1. **标签选择器**：标签选择器基于HTML元素的标签名，例如`<p>`，`<h1>`等。当你想要给所有特定类型的元素应用相同的样式时，可以使用标签选择器。例如，以下代码将设置所有...
css 元素选择器的简单实例
09-24
CSS（Cascading Style Sheets）元素选择器是CSS中最...熟练掌握元素选择器的使用，将有助于构建美观、响应且易于维护的网页设计。在进行前端开发时，理解并灵活运用各种选择器，可以极大地提高代码的可读性和复用性。
CSS3 选择器 基本选择器介绍
09-25
在这个介绍中，我们将专注于CSS3的基本选择器，这是理解CSS选择器体系的基础。 1. **通配符选择器（*）** 通配符选择器`*`用于选取文档中的所有元素。例如，`* { margin: 0; padding: 0; }`将清除所有元素的默认...
【网页设计】28：CSS选择器
https://blog.csdn.net/m0_74834215
03-06 833
这里*通配符通过改变background-color为peru改变了背景颜色，但是仔细观察发现在body中行内样式表设置的颜色仍然存在，这是为什么？特点：不能更改某一元素，选择器选中的是页面内所有对应的标签，不管标签藏的多深都能够通过标签选择器选中。注意：这里的群组选择器将p标签与li标签打组，但是前两句话并没有变色（涉及到选择器的权重问题）注意：当权重相同时，写在后面的选择器起作用。定义：标签名作为选择器的一种使用方式。
CSS基础：4种简单选择器的详解
u013179804的博客
04-05 1507
来再次总结一下这 4 个选择器。id 选择器优点：具有唯一性，能够精确选择特定元素。应用场景：适用于需要特定样式的元素，如页面顶部导航栏、页脚等。class 选择器优点：适用于多个元素共享同一样式的情况，可以在不改变 HTML 结构的情况下重用样式。应用场景：常用于定义可重复使用的样式，如按钮样式、卡片样式等。比如，淘宝这块商品的样子，虽然商品不一样，但外观宽高字体什么的其实是一样的，这就用class。通配符* 选择器优点：选择所有元素，可以作为全局样式的基础，但一般不推荐使用。应用场景。
最全68 个 Python 内置函数详解(1)，征服Python面试官
最新发布
m0_60667010的博客
05-13 790
这是我花了几天的时间去把Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。最近我才对这些路线做了一下新的更新，知识体系更全面了。包含了Python入门、爬虫、数据分析和web开发的学习视频，总共100多个，虽然没有那么全面，但是对于入门来说是没问题的，学完这些之后，你可以按照我上面的学习路线去网上找其他的知识资源进行进阶。
CSS选择器详细总结_css选择器总结
2401_84411433的博客
04-28 626
作用类似，但是仅匹配使用同种标签的元素 || 37. | E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) || 38. | E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) || 39. | E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
HTML 基本选择器
m0_65066169的博客
10-01 2060
里面要加 id="你起的名字".我这里写的a,一定要加#号。使用类选择器的时候如上面我写的一个
CSS中的常见选择器
Java 技术专栏，从入门到精通，熟悉企业级开发
03-09 2657
本文介绍了CSS中的常见选择器，选择器的出现可以让我们实现对具体的元素标签进行定制，因此我们要掌握好各类选择器的使用。
HTML常用选择器——制作一个简单网页
qq_62372244的博客
11-21 338
3、所有的选择器权重相加，最高也不会超过上一等级的权重,如再多的类选择器权重相加，也不会超过id选择器权重。定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定某一定。定义：给父元素或者祖先元素设置有关样式，它会继承到子元素或后代元素上，4、在并集选择器（群组选择器）当中，选择器权重是各算各的,最终谁大听谁的。—功能跟上面相似，不同的是，这是在同类型的子元素中去选择。样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果，:nth-child() 选中第几个元素。
CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？
热门推荐
Shmily_ox的博客
03-07 4万+
CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！ 一、通配符选择器 通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。 基本语法格式：*{ 属性1：属性值1；属性2：属性值2；} 例子 使用该选择器定义样式，清除所有HTML标记的默认边距。 *{ margin：0； /*定义...
HTML选择器与网页设计基础教程
"HTML选择器示例-网页设计" 在网页设计中，HTML选择器是CSS（层叠样式表）中的一个重要概念，它们用于指定要应用样式的HTML元素。在这个示例中，我们看到一个简单的HTML文档，其中包含了内联样式。内联样式是通过在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值