css3关系选择器怎么使用

这篇文章主要讲解了“css3关系选择器怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3关系选择器怎么使用”吧！

成都创新互联公司主要从事成都网站制作、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务西陵,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

css3关系选择器有4种：1、包含选择器“E F”，选择所有被E元素包含的F元素；2、子代选择器“E>F”，选择所有作为E元素的直接子元素F；3、相邻选择器“E+F”，选择紧跟E元素后的F元素；4、兄弟选择器“E~F”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS3中的关系选择器主要包括包含选择器、子代选择器、相邻选择器和兄弟选择器：

• 包含选择器由符号空格“ ”连接

• 子代选择器由符号“>”连接

• 相邻选择器由符号“+”连接

• 兄弟选择器由符号“～”连接

下面我们将详细讲解一下。

包含选择器（E F）

选择所有被E元素包含的F元素，中间用空格隔开

ul li{color:green;}


  
宝马
  
奔驰


  
奥迪

CSS3子代选择器(E>F)

子代选择器主要用来选择某个元素的第一级子元素。例如希望选择只作为h2元素子元素的strong元素，可以这样写：h2> strong。

下面通过一个案例对子代选择器(>)的用法进行演示，如图所示：

    
    
    


    
这个知识点很重要
　  
PHP中文网欢迎你！

在上述代码中，第15行代码中的strong元素为h2元素的子元素，第16行代码中的strong元素为h2元素的孙元素，因此代码中设置的样式只对第15行代码有效。

CSS3兄弟选择器(E+F)

该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

下面通过一个案例对临近兄弟选择器的用法进行演示。

    
    
    
        p + h3{
            color: green;
            font-family: "宋体";
            font-size: 20px;
       }

    


　
　  
《赠汪伦》
　  
李白乘舟将欲行，
　  
忽闻岸上踏歌声。
　  
桃花潭水深千尺，
　  
不及汪伦送我情。

在上述代码中，第7～11行代码用于为p元素后紧邻的第一个兄弟元素h3定义样式。从结构中看出p元素后紧邻的第一个兄弟元素所在位置为第17行代码，因此第17行代码的文字内容将以所定义好的样式显示。

从图中可以看出，只有紧跟p元素的h3元素应用了代码中设定的样式。

CSS3相邻选择器(E~F)

普通兄弟选择器使用“～”来链接前后两个选择器。查找某一个指定元素的后面的所有兄弟结点。

下面通过一个案例对普通兄弟选择器的用法进行演示，如下所示。

    
    
    
        p ~ h3{
            color: pink;
            font-family: "微软雅黑";
            font-size: 20px;
       }
    


　
    
《赠汪伦》
    
李白乘舟将欲行，
    
忽闻岸上踏歌声。
    
桃花潭水深千尺，
    
不及汪伦送我情。

从图中可以看出，p元素后面的所有兄弟元素h3都应用了代码中所设定的样式。

感谢各位的阅读，以上就是“css3关系选择器怎么使用”的内容了，经过本文的学习后，相信大家对css3关系选择器怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！