出现问题的代码： .divcss5{ width:500px; border:1px solid #000; padding:10p...
MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同的样式。...比如说，段落文本颜色默认为黑色，但是当它位于，， 里面时，文本颜色为灰色： /* default black */ p { color: #000...比如说，下面的复杂选择器将绿色文本颜色应用于所有、和元素，这些元素是的子元素，其包含类.primary或.secondary，并且不是的第一个子元素...简而言之： 浏览器在页面上绘制元素时将CSS样式应用于该元素。因此，在进一步添加子元素时，整个父元素必须重新绘制。...总结 :is() 和 :where() 伪类选择器简化了 CSS 语法。你对嵌套和CSS预处理器的需求会减少。 :has()更具革命性和令人激动。父级选择将迅速流行起来，我们将忘记黑暗时代。
子选择器， .span>li{}，作用于父元素span类下一层的li标签。 包含选择器，.span li{}，作用于父元素span下所有li标签。...---- CSS的继承、层叠和特殊性 继承 CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...（真霸道，一个块级元素独占一行） 元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
可以使用类选择器列表方法为一个元素同时设置多个样式 子选择器(>) 用于选择指定标签元素下的第一代子元素。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。...important要写在分号的前面 这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。...css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。 （1）CSS伪类 :link -> 该伪类将应用于未被访问过的链接，IE6不兼容。一般不用此伪类，直接使用a标签。 ...:active -> 该伪类将应用于被激活的元素，例如被点击的链接、被按下的按钮登等。 :visited -> 该伪类将应用于已经被访问过的链接。 ...:focus -> 该伪类将应用于拥有键盘输入焦点的元素。 ...（2）继承性 所谓继承性是指写css样式表时，子标记会继承父标记的某些样式，例如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。 ...（5）嵌套块元素垂直外边距的合并 当块级元素进行嵌套时，如果父盒子没有设置上边框和上内边距的话，子盒子的上外边距和父盒子的上外边距会进行合并。
即html设置的字体大小来定义，默认html的字体大小是16px； 8、继承相关 css的继承：就是给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。...，默认为100%； 4.块级元素中可以包含块级元素和行内元素。...3.根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。 转换 当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。...原因： 当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零...个伪类的样式；当状态改变时，它⼜会失去这个样式。
样式不冲突，不会层叠 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color...想要设置一个可继承的属性，只需将它应用于父元素即可。 CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。...在考虑权重时，初学者还需要注意一些特殊的情况，具体如下： 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。...总之，他拥有比选择器都大的优先级。 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!...使用了类选择器、属性选择器、伪元素和伪类选择器的规则。 5. 使用了元素选择器的规则。 6. 只包含一个通用选择器的规则。 7. 同一类选择器则遵循就近原则。
样式不冲突，不会层叠 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。...子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性） CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题...即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。...总之，他拥有比上面提到的选择器都大的优先级。 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!...使用了类选择器、属性选择器、伪元素和伪类选择器的规则。 使用了元素选择器的规则。 只包含一个通用选择器的规则。 同一类选择器则遵循就近原则。
一个较新的CSS选择器/伪类被称为 :has ，它允许您选择每个具有与您提供给 :has() 函数的选择器匹配的子元素的元素。它在CSS中是一个重要的解决方案，不仅仅是一个简单的“父级”选择器。...使用 :has() 选择器，您可以将样式应用于父元素或祖先HTML元素。这样我们就可以扩展选择器的范围，包括一个或多个兄弟或子元素。 在本文中，我们将讨论CSS选择器以及它们在代码中的多个使用示例。...它是一个强大的CSS工具，您可以用于以下目的： 为子元素的父元素设置样式：如果一个 元素包含一个 元素，你可以使用 :has() 选择器来为它设置样式。...现在，我们要选择一个元素的父级。...下面的示例将带我们进入项目的下一个部分，效果如下： 当复选框被选中时，没有任何反应。但是我们可以通过 :has 伪类轻松实现某些操作。
2.结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 3.结构伪类选择器 nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点） n 可以是数字...， 常用于根据父级选择器里面的子元素 区别： nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配 nth-of-type 对父元素里面指定子元素进行排序选择...其他特性（了解） 图片变模糊： filter CSS属性将模糊或颜色偏移等图形效果应用于元素。...计算盒子宽度 width: calc 函数： calc() 此CSS函数让你在声明CSS属性值时执行一些计算。...7.CSS3 过渡（重点） 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边 ...三、清除浮动 1、清除浮动的原因： 1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局 2、...解决办法：不建议让子元素宽高 > 父级元素宽高 1.4 p包含块级元素标签。...第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边 ...三、清除浮动 1、清除浮动的原因： 1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局 2、
子选择器， .span>li{}，作用于父元素span类下一层的li标签。 包含选择器，.span li{}，作用于父元素span下所有li标签。 通用选择器，*{}，匹配所有html的标签元素。...包含选择器作用于该标签下的子元素,不包含本身,标签选择器作用包含自己本身 标签选择器 标签选择器其实就是html代码中的标签。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...important} 这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。...下面注意一个特殊情况： 当给 font-size 设置单位为 em 时，此时计算的标准以父元素p的 font-size 为基础。
CSS 类选择器的选择符是 “.”。 <!...当标记发生嵌套时，内层标记就成为外层标记的后代。 <!...下面给大家介绍几个常用的伪类。 :link 应用于未被访问过的链接。IE6 不兼容，解决此问题，直接使用 a 标签。 :hover 应用于有鼠标指针悬停于其上的元素。...上述例子中先定义的 box2 类样式，再定义的 box 类样式，最后显示的是 box 类中的样式。 优先级： 规则（1）：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式。...注：权重相同时，CSS 遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。所有都相同时，声明靠后的优先级大。
伪元素与伪类的区别和作用？对盒子模型的理解？ 单行、多行文本溢出隐藏？ 替换元素的概念与计算规则？ 1、CSS选择器与优先级 选择器 优先级权重 等级 实例 !...当浏览器放大导致元素的宽度大于 max-width 时，元素的 width 就会被 max-width 值取代。...当 min-width 值大于 max-width 时，则以 min-width 值为准。...给图片或元素设置float:left; 不足：有些容器不能设置浮动，会影响到后面元素等 将所有元素写在同一行，不要换行。不足：代码不美观 将元素的父元素设置font-size:0; 。...并且只要父元素隐藏，子孙没有任何办法可见 子孙元素全部不可见，但是给子孙加上 visibility: visible;时，子孙可见。 事件触发 不触发 不触发 9、伪元素与伪类的区别和作用？
使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。 当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...但注意有一些css样式是不具有继承性的。如border:1px solid red; 子元素继承父元素的样式，但并不是所有属性都是默认继承的。...层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。...而当为 percentage 类型时，子类则会先计算再显示（先计算后继承）。
）、^=（指定值开头）、$=（指定值结尾）、*=（包含指定字符串）、|=（空格分割值指定值开头） 7. css动态伪类选择器，:visited、:hover、:link、:active 8. css结构性伪类选择器...flex-shrink，默认为1，所有子元素的长宽超出父元素时的缩放占比（超出的长宽除以所有子元素的shrink加起来的数量，就是单份缩放的大小，为0时代表不进行缩放） flex-grow，默认为0，所有子元素的长宽超出父元素时的缩放占比...时，:focus-visible 伪类将生效。 27....解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题 解决子级元素外边距会使父级元素塌陷的问题 42. ul list-style失效 默认情况下ul下的li都会自带一个列表样式，如果个ul...但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器 (鼠标的动作将不能被该元素及其子元素所捕获
$：结尾包含 *：含字符串 ~：含单词 |：字符串开头或者用-连接 六 伪类选择器 选择元素的不同状态或者不确定存在的元素 a:link：a标签元素被点中后 目标：:target伪类，...当元素被跳转到后则选中 根伪类：:root伪类，根元素 空元素：:empty伪类，没有内容的标签 七 结构伪类选择器 首尾元素伪类：:first-child, last-child，所有元素里的第一个.../最后一个，是每一层级的；:first-of-type，:last-of-type，某类型元素的第一个/最后一个 唯一子元素伪类：:only-child，only-of-type 元素编号：:nth-child...important 四 元素继承权重 子元素继承父级元素的样式规则 继承没有权重，是NULL 不是所有规则都可以继承，比如边框 五 通配符与继承博弈 通配符权重是0 0 > NULL 六...font-weight：字重，粗细 font-size：字号，相对值是父级字体 em：相对单位，父级元素的font-size 三 颜色与行高 color： line-height：一般是1.5em
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。 白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。...样式不冲突，不会层叠 CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。...子元素可以继承父元素 的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性） CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题...相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...子绝父相 这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。 这句话的意思是 子级是绝对定位的话， 父级要用相对定位。
1）父级div定义height。 2）结尾处加空div标签clear:both。 3）父级div定义伪类:after和zoom。 4）父级div定义overflow:hidden。...但是当display的属性值被设置为block时，元素会以块级元素（ block-level elements）显示，而设置为inline时会以内连元素（ inline elements）显示. display...设置左右margin为auto 3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值 11.CSS优先级算法如何计算？...important > id > class > tag important 比 内联优先级高 12.CSS3新增伪类有那些？...CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
