HTML5学习_day02(2)--css层次选择器

最新推荐文章于 2022-10-02 20:49:06 发布

woaiwanshumen

最新推荐文章于 2022-10-02 20:49:06 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5零基础学习笔记文章标签： html5 层次选择器

本文链接：https://blog.youkuaiyun.com/woaiwanshumen/article/details/52612059

HTML5零基础学习笔记专栏收录该内容

43 篇文章

订阅专栏

这篇博客详细介绍了CSS中的层次选择器，包括后代选择器、子选择器和相邻兄弟选择器的使用方法。通过实例展示了如何利用这些选择器精确地控制页面元素的样式，帮助读者深入理解CSS的选择器层次概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css层次选择器

1.后代选择器
       写法：
       父..父级选择器父级选择器子级选择器{样式1;样式2;}
       作用:一级一级去寻找直到找到子级选择器，然后对子级进行样式控制。一般的标签的嵌套使用的比较多。
       实际:就是从最外层一层一层去找直到找到你想要的标签，最终通过选择器进行样式的设置。

例如：

     <div id="id1">
            <div>12444</div>
       </div>

     <div>
            <div id="id2">
                <div class="class2">
                    <div>13343444</div>
                    <p>121322345</p>
                </div>
            </div>
        </div>

style中的代码为:

   #id1 div{
                background: darkmagenta;
            }
        
   div #id2 .class2 div,p{
                background: darkkhaki;
            }

2.子选择器
       语法：父...父选择器>父父选择器>子选择器{样式1;样式2;..}
       作用：从最外层一层一层去找，直到找到想要的子元素位置，然后对该元素进行样式控制。
       例如：

                <div>
			<div id="id4">
				<p>456</p>
			</div>
		</div>

style中的代码为:

                       div>#id4>p{
				background: darkseagreen;
			}

        子选择器和后代选择器的区别：
       a.子选择器一定找的是直接子级，这里不包括元素中的标签元素
           div2的子级只有div3和p2
       b.后代选择器找的是子级，并且子级里面的所有元素都属于该元素的后代。
           div2的后代有div3,p1,p2

               <div1>
			<div2>
				<div3>
					<p1></p>
				</div>
				<p2></p>
			</div>
		</div>

3.相邻兄弟选择器

用法：

兄弟1选择器+兄弟2选择器+兄弟...选择器{样式1;样式2;}

例如:

                         <p1></p1>
			 <div></div>
			 <p2></p>

style中的代码：

		div+p{
			样式1;
			样式2;
		}

注意：

这个控制的是p2，而不是p1,虽然p1，p2与div离的都很近,但是p2是div的下一个.所以控制的是p2。
效果：只改变了p2的样式 div自身不改变而且p1不改变

看看下面的例子：

                <div>
			<p></p>
			<div></div>
			<span></span>
		</div>

            如果写p+span{
                                   样式1;
                                   样式2;
                             }
           这样写会错误不执行正确写法为div+span{}