CSS先后顺序影响效果

CSS样式选择器与网页布局
最新推荐文章于 2023-12-20 11:02:54 发布
转载 最新推荐文章于 2023-12-20 11:02:54 发布 · 325 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/xiaopihai988/p/4518139.html

本文详细介绍了CSS中各种选择器的使用方法及其在网页布局中的应用，包括后代选择器、子元素选择器、相邻兄弟选择器等，并通过实例展示了如何调整网页元素的样式与位置。

<head>
        <style type="text/css">
            <!--h1 em{color:red}-->
            <!--后代选择器-->
            ul em{color:red;font-weight:bold;}
            <!--子元素选择器-->
            h1 > strong {color:red}
            <!--相邻兄弟选择器-->
            h2 + p {margin-top:50px;}   
            <!--相邻兄弟选择器1-->
            li + li {font-weight:bold;}
        </style>
  </head>

显示效果

 

然后换下顺序

 

<head>
        <style type="text/css">
            <!--h1 em{color:red}-->
            li + li {font-weight:bold;}
            <!--后代选择器-->
            ul em{color:red;font-weight:bold;}
            <!--子元素选择器-->
            h1 > strong {color:red}
            <!--相邻兄弟选择器-->
            h2 + p {margin-top:50px;}
            <!--相邻兄弟选择器1-->
        </style>
    </head>

效果

 

 

转载于:https://www.cnblogs.com/xiaopihai988/p/4518139.html

【CSS笔记】CSS设置元素堆叠顺序、元素宽高自适应、calc数学函数
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
08-18 1107
【z-index】属性取值是数字，数字越大，优先级越高，元素就会位于最上层。CSS通过【百分比%】的形式来设置宽度、高度，从而实现宽度、高度的自适应，即：当浏览器窗口大小发生变化时候，元素的宽度、高度会自动变化。CSS可以通过【z-index】属性，设置元素的堆叠顺序，【z-index】属性值是一个数字，可以是负数、整数、0，数字越大优先级越高，也就是位于最上层。CSS默认情况下，定位元素的堆叠顺序是按照元素定义的先后顺序来确定的，也就是说，后面定义的元素会覆盖前面定义的元素，如下所示。...
纯CSS实现手风琴效果
热门推荐
whqet
02-23 1万+
今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。
样式的书写顺序到底能影响渲染性能吗，css中定位到底有几种方式
夸克IT
09-17 488
css基础篇（第六篇） 回顾 在上一讲中我们基本上掌握了 css 的书写顺序和一些简单的布局样式和流程，因为上一讲中并没有涉及到太多的技术类型，基本上都以理论为主的，所以看起来比较轻松一点。“思想先行”一直是我觉得比较重要的一点，在写布局的时候也是这个道理，一定要先思考才能写出比较合理的布局方式，如果布局不稳的话 后续样式就更无从谈起，特别对新手来说是尤为重要的。 关于评论 上一篇内容，小伙伴：“wuhu” 留言说：“我记得样式的属性顺序最好按照重流>重绘，可以提高渲染性能”，在这里针对这个问题再次说
css float语句先后顺序影响表达效果
weixin_45232028的博客
11-14 343
class 在 CSS 中出现的顺序会影响优先级
jamey8383的专栏
04-30 541
如果同一个 element 有多个 class，CSS 后出现的 class 会覆盖先前的，有更高的优先级。 id 比 class 高一个优先级。
css样式表的先后顺序
weixin_34197488的博客
03-17 194
2019独角兽企业重金招聘Python工程师标准>>> ...
引入js、css文件的顺序也会影响页面的显示_江南春008_新浪博客
jjh0901的博客
02-20 169
任务中发现，页面中本来已经引入了一些js和css文件，当我引入通用组件的js和css文件后发现页面乱了 原因是：通用组件中的js或css和页面中已有的重复了，然后会出现两种情况，一：页面好了；二：页面仍然是乱的。针对第二种情况可以改变一下通用组件js、css文件和原有js、css文件的摆放顺序。 很管用，可以试试 ...
精选资源
css3实现多个元素依次显示效果
01-19
在css3中，我们使用animation与keyframes结合，可以给元素添加各种各样的动画效果。具体的动画，在keyframes中定义，在animation中使用。例如可以定义一个从上飞入的动画效果。 @keyframes topIn { from { ...
css animation顺序,使用CSS按顺序设置DIV元素的动画?
weixin_33160876的博客
08-04 693
我有几个div嵌套在div随班就读.menu;其思想是将每个元素从外边缘依次从上到下转换到页面中。我想我可以用:nth-child(n)但由于某种原因,我不能让它和职位一起工作。我的过渡工作很好transition: 1s left/right. 然而,我决定要在每次初始转换之间延迟一段时间,以获得良好的视觉效果。我去了W3 Schools并研究使用animation特点CSS我决定我需要:.me...
CSS实现气泡Loading效果的关键技术和动画原理
通过设置动画的先后顺序（使用animation-delay），实现了气泡的连续动态效果。 5. SASS（Syntactically Awesome Stylesheets）的使用：SASS是一种CSS预处理器，可以使用更高级的编程功能，如循环、条件语句等。在本...
CSS声明顺序
memoryI的博客
03-04 856
1.Positioning 定位 ，从正常的文档流中移除元素，还能覆盖盒模型 2.Box model 盒模型， 决定组件的尺寸和位置 3.Typographic 文本设置，只是影响组件的内部（inside） 4.Visual 视觉效果，背景颜色，只是影响组件的内部（inside） 5.Other 手势操作等 .box{ // Positioni...
CSS的优先级顺序
breakbridge的博客
07-02 517
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p { background-color: yellow !important; } /*1.!important 优先级最高*/ #p1 { background-color: blue; } .
css样式的优先顺序
weixin_30908941的博客
09-25 573
一、css样式的权重：！important(1000+) > 内联样式( 1000) > ID选择器(100) > 类选择器(10) > 标签选择器(1 ) > 默认样式(0 ) 二、常用的样式顺序： 内联样式表 > ID 选择器 > Class 类选择器 > HTML 标签选择器 三、说明： 1. 选择器的权值越大越优先，“!i...
CSS 的浏览器兼容性测试顺序!!!
weixin_33814685的博客
09-02 156
http://www.osxcn.com/css/css-browser-compatibility-testing.html 一种是写 CSS 的时候同时使用多个浏览器测试，然后再进行下一步。另外一种方法就是，先使用一种浏览器调试，写完后再用其他浏览器检查兼容性并修复。第一种方法乍看比较费时，但是把整个时间算起来它们也相差不多，而且在整个网站完后再检查兼容性的话，你会发现那是一件痛...
css样式优先级及书写顺序
最新发布
weixin_44298215的博客
12-20 1921
即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。
《前端》样式冲突，怎么解决--2020年3月30日
BelleDiao的博客
03-30 1613
有时候我引用了bootstrap样式，自己也定义了 样式。但是我看后台应用的是bootstrap包装好的样式。 （很多时候，其实是我愚蠢的总把id选择器，用了“.”，其实应该用“#”） 还有的时候，element.style的样式也阻挡了我自定义的样式。 首先，了解优先级问题。 通常可以将css的优先级由高到低分为六组： 1、第一优先级：无条件优先的属性只需要在属性后面使用！impor...
CSS样式的优先级
xiaoweids的博客
05-31 2097
优先原则一：文本从上到下，后出现的样式优先于前面出现的同一样式 例： <styletype=”text/css”> .def1{background:black;} .def2{background:yellow; } </style> <div class=” def2def1″>测试1</div> 结果：所有浏览器均yellow色，注意：与class=””引号内的顺序无关，只看.def1和.def2在声明时的顺序，.def2后声明的所以权重高。优先原则二：
css优先级详解
qq_28471889的博客
07-24 304
##1 css权重 参考：https://zhuanlan.zhihu.com/p/89642030 面经原答案中提到声明来源，不知道这里的用户定义是什么意思 首先按照来源排序，从高到低依次为： 用户自定义的带有 !important 标记的声明； 开发者编写的带有 !important 标记的声明； 开发者编写的常规声明； 用户自定义的常规声明； 浏览器默认声明； 1.1 权重顺序 ！important > 行内样式 > id选择器 > 类选择器、伪类选择器、属性选择器 > 标签选
提升代码质量：如何遵循 CSS 优先级和最佳实践
你若盛开，清风自来
06-12 386
CSS权重指的是样式表规则（包括内联样式、ID选择器、类选择器、标签选择器、通配符和继承属性）对元素样式影响的优先级。CSS权重越高，其样式优先级也越高，会覆盖掉其他具有低权重的样式。内联样式：权重值为1000ID选择器：权重值为100类选择器、伪类选择器、属性选择器：权重值为10标签选择器、伪元素选择器：权重值为1通用选择器（*）的权重值为0，但如果它与其他选择器组合使用时，会根据组合选择器的权重进行计算继承属性没有权重。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值