CSS 选择所有子元素添加样式_css 所有子元素_黑子Kuroko的博客

相关文章推荐

聪明的莲藕 · 在ajax调用过程中，如何使用HTTP重定向 ...· 9 月前 ·

没读研的炒粉 · postgresql - ...· 1 年前 ·

飘逸的地瓜 · TaskbarItemInfo 类 ...· 1 年前 ·

温文尔雅的蟠桃 · 【前端开发】菜鸟必看，html ...· 1 年前 ·

想出家的绿茶 · Data Sources and ...· 1 年前 ·

上面代码成功实现了 .lk-toolbar 下一切子元素的 margin-bottom: 20px

这么一来避免罗列各种可能出现的子元素类型，傻逼式操作：

.lk-toolbar {
    .el-input {
        width: 169px;
        margin-right: 10px;
        margin-bottom: 20px;
    .el-button, .el-date-editor {
        margin-bottom: 20px;
应用场景（效果）： 
感悟（废话）： 
一开始纳闷CSS中到底有没有这种选择全部子元素的选择器呢，后来看了下文档，发现虽然没有，但是最基本的方法人家已经告诉你了，剩下的就靠你自己的造化了（看你会不会变通使用！） 
教程OS：“方法都在这了，会不会用就看你自己了。” 
                    方法：&amp;gt; *以实际项目中less为例：.lk-toolbar {    .el-input {        width: 169px;        margin-right: 10px;    }    &amp;gt; * {        margin-bottom: 20px;    }}上面代码成功实现了 .lk-toolbar 下一切子元素的 margin...
				在设计和开发Web应用程序时，有时我们需要选择除最后一个元素之外的元素内的所有子元素，那么如何使用CSS来选择元素中除最后一个之外的所有子元素？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。
要使用CSS选择元素中除最后一个之外的所有子元素，可以使用使用:not和:last-child选择器。
element:not(:last-child) { 
    // CSS样式
				初识伪元素
 说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。那这时我不禁地想问：“直接添加两个class为.before和.after不是一样的吗？”  其实使用伪元素::before和::after以下两个好处：
1.HTML的代码量减少，对SEO有帮助；
2.提高JavaScript查询元素的效率。
 那为什么会这两好处呢？原因就是伪元素并不存在于DOM中，而是位于CSSOM，HTML代码和DOM Tree中均没有它的身影，量少了自然效率有所提升。但这也引入一个问题——我们没办法通过Jav
				1、{clear:both;}设置了clear 属性的元素，其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染，使包含浮动元素的容器高度正常。所以适用于浮动元素后面容器之内有个非浮动元素，或是额外添加一个新的空元素。 2、.after-clear-float :after{content:; display:block; clear:both;}利用伪类添加新元素，原理同上，所以只适用于父容器最后一级子元素是浮动的，即浮动元素后面没有非浮动元素把它和父容器隔开。只是IE6/7不支持:after 伪元素。 3、{overflow:hidden;}或overflow:aut
				最近在练习网易严选首页的布局时，发现它的顶部导航栏需求很特殊，第一项和最后两项是没有下拉选择框的。那么问题来了，在写css的时候该怎么使用选择器去达到这样的需求呢!？
首先先贴一下我最后的解决方案：
.nav-first>li:nth-child(n+2):not(:nth-last-child(-n+2)):hover .nav-second {
  display: block;
其中核心是：:nth-child(n+2):not(:nth-last-child(-n+2))
:nth-c
				CSS的nth-child(n)是用来匹配HTML元素的一种伪类选择器。其中n代表一个整数，表示要选择的元素在其父元素的子元素中的位置。比如nth-child(2)表示选择父元素的第二个子元素。
该选择器可以用于任何HTML元素，包括div、p、ul、li、table等等。在某些情况下，使用它可以更精确地控制页面样式和布局。
例如，在一个ul列表中，我们想要特殊处理第二个li元素，可以通过nth-child(2)来选择它，并添加特殊样式。
还可以通过组合使用nth-child(n)和其他选择器，实现更加复杂的页面布局效果。
需要注意的是，nth-child(n)选择器是基于所有元素的位置而不是它们的内容来匹配的。如果想要根据元素的内容来匹配，可以使用CSS的其它选择器。
总的来说，nth-child(n)是CSS中常用的一个伪类选择器，可以将HTML元素按照它们在父元素中的位置进行精准选择并修改对应样式。