码迷,mamicode.com
首页 > Web开发 > 详细

CSS3选择器二

时间:2019-11-20 16:44:41      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:alt   ace   ram   tle   第一个   info   idt   lin   段落   

1.组合器

1.1后继组合器可以选择出给定元素在文档树中的子元素,一个元素中某元素类型的所有实例,例如 article p{...}

1.2.邻近同级组合器,它选择文档树中彼此相邻且有相同父元素的元素。以上面的例子为例,使用+操作符编写h2+p{...},就只给每个section中的起始段落设置样式(假定它们都使用h2标题)
大家自己去尝试哦

<!DOCTYPE html>
<html>
<head>
</head>
<style>
article>p{
    font-size:125%;
}
h2+p{
    font-weight: bold;
}
</style>
<body>
<article>
    <h1>
        article title
    </h1>
    <p>Child combinator targets</p>
    <section>
        <h2>
            Section Title
        </h2>
        <p>
            Adjacent sibling
        </p>
        <p>
            dhsakgdksa
        </p>
    </section>
    <p>
        chil
    </p>
</article>
</body>
</html>

  技术图片

 

 

1.3一般同级组合器,它使用~操作符。使用一般同级组合器时,第二个选择器不必紧跟在第一个选择器后面,但选择器的两个部分仍有相同的父元素。扩展前面的例子,可以使用一般同级组合器,选择深度嵌套的section中的ul:

<!DOCTYPE html>
<html>
<head>
</head>
<style>
h3~ul
{
    list-style-type:binary;
    color: brown;
}
</style>
<body>
<article>
    <h1>
        article title
    </h1>
    <p>Child combinator targets</p>
    <section>
        <h2>
            Section Title
        </h2>
        <p>
            Adjacent sibling
        </p>
        <ul>
            <li>
                i
            </li>
            <li>
                love
            </li>
            <li>
                program
            </li>
        </ul>
    </section>
    <section>
            <h3>
                Section Title
            </h3>
            <p>
                Adjacent sibling
            </p>
            <p>
                    h3Adjacent sibling
            </p>
            <ul>
                <li>
                    i
                </li>
                <li>
                    love
                </li>
                <li>
                    program
                </li>
            </ul>
        </section>
    <p>
        chil
    </p>
</article>
</body>
</html>

技术图片

 

 

 

 

 

CSS3选择器二

标签:alt   ace   ram   tle   第一个   info   idt   lin   段落   

原文地址:https://www.cnblogs.com/yourdid/p/11898588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!