CSS选择器

最新推荐文章于 2024-07-23 14:51:29 发布
最新推荐文章于 2024-07-23 14:51:29 发布
阅读量687 收藏
点赞数
分类专栏： 【CSS+DIV】 文章标签： css 
对于同样的CSS属性，选择器优先级是，id选择器>class选择器>标签名选择器。class+标签名选择器>class选择器。

对于不同的CSS属性，继承。上面优先级反走。
</pre><pre name="code" class="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>CSS的基本选择器</title>
</head>


<style type="text/css">
h1{color:blue; font-size:25px; text-decoration:underline;}				/*标签选择器  */
em{ color:red;}																	
p span{ color:green;}
p{font-weight:normal; font-size:55px;}


.red{ color:red; font-size:55px;}						/*类选择器使用"."进行标识，后紧跟类名  */
.two{ font-weight:lighter; font-size:13px;}
.father div{ background-color:red;
.son{background-color:blue;}


#one{ font-weight:bold; font-size:36px;}        			  /*ID选择器使用“#”前缀标识符进行标识  */

}
</style>


<body>
<h1>标签名选择器</h1>
<p class="red">class选择器</p>
<p id="one">id选择器</p>
<p><span>嵌套选择器</span></p>
<h1><em>嵌套选择有继承特性</em></h1>
<p id="one" style=" font-weight:lighter; font-size:13px">行内样式>ID选择器</p>
<p id="one" class="two">ID选择器>class选择器</p>
<p class="two">class选择器>标签名选择器</p>
<div class="father">背景色为red
<div class="son">class+标签名选择器>class选择器</div>
</div>
</body>
</html>




效果图：


maxxbw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 选择器
langmanboy的博客
04-08 1950
CSS 选择器 1. 什么是 CSS 选择器？ CSS 选择器用于查找（或选取）要设置样式的 HTML 元素 CSS 选择器可以分为五大类： 简单选择器（根据名称、id、类来选取元素） 组合器选择器（根据它们之间的特定关系来选取元素） 伪类选择器（根据特定状态选取元素） 伪元素选择器（选取元素的一部分并设置其样式） 属性选择器（根据属性或属性值来选取元素） 选择器 {属性: 属性值;} 2. 简单选择器 元素选择器 类选择器 id 选择器 * 通用选择器（通配符） 交集与并集选择器 2-1 元素
css选择器
总结前端开发中遇到的问题，分享前端知识
08-25 6215
通配选择器（Universal selector）作用：选中页面中的所有元素;元素选择器（Type selector）也叫类型选择器、标签选择器
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
渲染CSS选择器
09-27
最近在High Performance Web Sites blog看到一篇关于css选择器的文章《Simplifying CSS Selectors》，我英文太差，在翻译软件和朋友的帮助下稍微的看懂了一些，看本文需要谨慎，谨防被我误导，如果你英文强，能翻译...
最新！CSSCI（2023-2024）期刊目录公布！
2301_76900678的博客
07-19 608
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
CSS性能优化：从加载速度到渲染效率的全方位提升
WayneYalejk的博客
07-22 208
在快节奏的互联网环境中，网页的加载速度和渲染效率直接关系到用户体验和搜索引擎排名。CSS作为网页样式的主要描述语言，其性能优化同样不容忽视。本文将介绍一系列CSS性能优化的策略，帮助开发者从加载速度到渲染效率实现全方位的提升。
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 181
css浮动——float特点
DAY05 CSS
adminstate的博客
07-20 1056
CSS样式
动态美学：WebKit中CSS转换与动画的魔力
2401_85743969的博客
07-19 740
CSS转换允许我们对元素进行旋转、缩放、移动和倾斜等操作。：移动元素。rotate()：旋转元素。scale()：缩放元素。skew()：倾斜元素。matrix()：更复杂的转换组合。CSS动画允许我们为元素的属性变化定义动画效果。：指定需要动画效果的属性。：指定动画的持续时间。：指定动画的速度曲线。：指定动画的延迟时间。
CSS进阶探索：动画与过渡效果
2301_79375313的博客
07-23 188
在掌握了CSS的基础知识后，进一步探索CSS的动画与过渡效果，可以让你的网页更加生动有趣。动画和过渡不仅可以增强用户的视觉体验，还能有效传达信息，提升交互的流畅性。本文将带你深入了解CSS动画与过渡的奥秘，让你的网页设计更上一层楼。
CSS Text(文本)
lly202406的博客
07-23 257
CSS中文本属性非常丰富，通过合理运用这些属性，可以创造出各种美观、实用的文本效果。希望本文能帮助您更好地掌握CSS文本属性的使用方法。
Tailwind CSS常见用法
solocao的专栏
07-18 341
Tailwind CSS允许在tailwind.config.js配置文件中自定义样式，如颜色、字体大小、边框宽度等。然后，这些自定义样式可以在HTML中通过类名引用，如text-custom-size。
关于css中flex布局垂直居中失效问题的原因
zuo-yiran的博客
07-19 306
flex布局垂直居中失效原因
javafx css 选择器
05-20
JavaFX CSS选择器是一种类似于HTML和CSS的选择器语言，它用于对JavaFX用户界面组件进行样式化和布局。通过使用JavaFX CSS选择器，可以轻松地为JavaFX应用程序中的各种组件添加样式和布局。以下是一些JavaFX CSS选择器的示例： 1. 类选择器：用于选取具有相同类名的组件。 例如：.my-class { ... } 2. ID选择器：用于选取具有唯一ID的组件。 例如：#my-id { ... } 3. 子元素选择器：用于选取某个父元素下的特定子元素。 例如：.parent .child { ... } 4. 伪类选择器：用于选取特定状态下的组件，例如悬停或选中状态。 例如：.my-button:hover { ... } 5. 通配符选择器：用于选取所有组件。 例如：* { ... } 6. 属性选择器：用于选取具有特定属性值的组件。 例如：.my-textfield[text="Username"] { ... }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值