CSS02（基本选择器）

最新推荐文章于 2024-10-06 15:01:40 发布
最新推荐文章于 2024-10-06 15:01:40 发布
阅读量75 收藏
点赞数
分类专栏： CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51224492/article/details/121395167
版权

标签选择器、类选择器、id选择器

html代码
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<p>标签选择器</p>
<h1 class="class">类选择器</h1>
<h1 id="Heathcliff">id选择器</h1>
</body>
</html>

css代码
style.css

/*ID选择器*/
p{
    color:deepskyblue;
}
/*类选择器*/
.class{
    color:yellowgreen;
}
/*id选择器*/
#Heathcliff{
    color: red;
}

测试访问
在这里插入图片描述

选择器的优先级

id > class > 标签

html代码
index02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/style02.css">
<body>
<h1>RAINBOWSIX</h1>
<h1 class="ash">RAINBOWSIX</h1>
<h1 class="ash" id="zofia">RAINBOWSIX</h1>
</body>
</html>

css代码
style02.css

h1{
    color:yellow;
}
.ash{
    color:deepskyblue;
}
#zofia{
    color: darkred;
}

测试访问
在这里插入图片描述

悬梁锥刺股
关注
专栏目录
css元素选择器菜鸟教程,css基本选择器
weixin_35695430的博客
08-03 1711
CSS基本选择器(对指定的标签设置样式，要把指定的标签选择出来)：元素选择器、类选择器、id选择器、组合选择器、通用选择器1. 元素选择器(类型选择器或标记选择器)：声明哪些元素采用css样式2. 类选择器(class)：应用样式而不考虑具体设计的元素，为了将类选择器的样式与元素进行关联，必须将元素中的class属性指定一个适当的值。class 选择器在HTML中以class属性表示, 在 CSS...
CSS3 选择器 基本选择器介绍
12-13
我把CSS选择器分开成三部分，第一部分是我们常用的部分，我把他叫做基本选择器；第二部分我把他称作是属性选择器，第三部分我把他称作伪类选择器，这一部分也是最难理解和掌握的部分，今天我们先来看第一部分——...
css02
Synga的博客
04-11 210
盒模型 概念：ccs盒模型本质上是一个盒子，封装周围的html标签，他包括：边距，边框，填充和实际内容 盒模型的宽高：margin+padding+content+border border边框 border: 边宽 样式 颜色 border: 1px; 边宽 border-style: solid(实线) dashed(虚线) double(双实线) dotted(点) border-col...
CSS_02
YST的博客
04-23 263
一些style 样式集合 demohttps://yst521.github.io/HTMLTest/HTML/htmls/CSSBOX.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <l...
CSS02：四种CSS导入方式
搬运工
02-10 2232
行内样式 在标签元素中，编写一个 style 属性，编写样式即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 style="color: rebeccapurple">我是标题</h1> </body&
css的父选择器
Cribug8080的博客
05-22 4万+
css的父选择器 首先声明一点，目前没有css的父选择器。新出的css3也没有。但是已经有很多人有很多次提案了。 反向选择 在2008年Shaun Inman建议这种父选择器。 a < img{ border: none; } 这段css的目的是选择img元素的a标签。 parent Remy Sharp建议使用:parent a img:parent { background: ...
CSS的选择器
weixin_65317510的博客
07-22 1921
6种选择器：基本选择器、复合选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器。
CSS中的基本选择器
qq_45192812的博客
03-03 1909
CSS中的基本选择器 什么是选择器？选择器就是通过标签选择一类元素进行控制，常用于HTML等语言中。 css中的选择器种类有很多，下面介绍几种常见的基本选择器：标签选择器，类选择器和id选择器 一、标签选择器 标签选择器又叫元素选择器：文档的元素就是最基本的选择器。 例如： /*对h1和p标签进行选择*/ <style> h1{ background: wheat; border-radius: 21px; }
CSS的选择器(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-21 8万+
一、常用的选择器 1.元素选择器 2.类选择器(class选择器) 3.id选择器 4.通配符选择器 二、群组选择器 三、关系选择器 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器 5.案例 四、属性选择器 五、伪类选择器 1.常用的伪类选择器 2.否定伪类 3.元素的伪类 六、伪元素选择器
CSS中的常见选择器
Java 技术专栏，从入门到精通，熟悉企业级开发
03-09 2928
本文介绍了CSS中的常见选择器，选择器的出现可以让我们实现对具体的元素标签进行定制，因此我们要掌握好各类选择器的使用。
CSS中所有选择器详解
杨杨吖的博客
08-04 9577
作用：通过id属性值，找到页面中带有这个id属性值的标签，并设置样式。作用：通过类名，找到页面中所有的带有这个类名的标签，并设置样式。作用：通过标签名，找到页面中所有的这类标签，并设置样式。作用：找到页面中所有的标签，然后设置样式。作用：选中页面中同时满足多个选择器的标签。作用：同时选择多组标签，设置相同的样式。作用：选中含有指定属性和指定属性值。作用：选中含有指定属性和指定属性值。作用：选中含有指定属性的元素。作用：选中含有指定属性和。作用：选择某元素后面的。作用：选中指定属性和。
CSS选择器.pdf
10-09
首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中所有元素，常用于统一设置页面元素的外边距和内边距。但是，由于其作用域较大，使用时应...
CSS的基本选择器.pdf
07-10
CSS基本选择器 CSS 是一种样式表语言，用于描述 HTML 或 XML 文档的呈现方式。在 CSS 中，选择器是核心概念之一，通过选择器，我们可以选择一个或多个 HTML 标签，然后使用 CSS 样式的规则为这些标签定义样式，实现...
CSS浮动
最新发布
2401_82561004的博客
10-06 280
浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。另外，在浮动元素之后定义的文本或者行内元素都将环绕在浮动元素的一侧，从而可以实现文字环绕的效果，类似于Word 中图文混排。注意：浮动（float）属性仅对非绝对定位的元素有效，跟随浮动元素的文本或行内元素将围绕在浮动元素的另一侧，例如向左浮动的话其它元素将围绕在浮动元素的右侧。运行结果如下图所示：图：float 属性演示。
html+css+js实现轮播图
weixin_62831076的博客
10-01 436
【代码】html+css+js实现轮播图。
css3-----2D转换、动画
m0_73882020的博客
10-01 693
 转换transform 我们简单理解就是变形 有2D 和 3D 之分 我们暂且学了三个 分别是 位移 旋转 和 缩放 2D 移动 translate(x, y) 最大的优势是不影响其他盒子， 里面参数用%，是相对于自身宽度和高度来计算的 可以分开写比如 translateX(x) 和 translateY(y) 2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg 2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子。
html5 + css3（下）
2301_76979886的博客
10-01 2539
如果需要让div、p、h（大盒子）水平居中？• 可以通过。
【H2O2|全栈】关于CSS（10）CSS3扩充了哪些新鲜的东西？（三）
过期的H2O2的博客
09-30 1037
本系列博客主要介绍CSS有关知识点，当前章节讲述CSS3相关内容。本期主要内容为CSS3的过渡属性和帧动画。部分内容仅代表个人观点，仅供参考，希望能帮助到您。
CSS3选择器详解与实例
"这篇内容主要介绍了CSS3选择器的基本概念和使用方法，包括基本选择器、多元素的组合选择器以及CSS2.1属性选择器。" 在网页设计和开发中，CSS（层叠样式表）是用于控制网页元素样式的重要工具。CSS3选择器的引入，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值