CSS(三) 高级特性_css js 高级特性-CSDN博客

本文链接：https://blog.csdn.net/hlfsunshine/article/details/78169703

复合选择器

1 “交集”选择器和”并集”选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>“并集”选择器</title>
<style type="text/css">
    p{
        font-size: 30px;
    }

    p.c{
        text-decoration: underline;
    }

    .c{
        color: blue;
    }

    p,h1,.c,#d1{
        background-color: gray;
    }
</style>
</head>
<body>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3" class="c">p3</p>
<h1 id="h1" class="c">h1</h1>
<h2 id="h2">h2</h2>
<div id="d1">d1</div>
</body>
</html>

p.c 交集选择器 p下面类别为c的标签应该具有的属性
p,h1,.c,#d1 并集选择器以上四个均具有的特征

2 “后代”选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>“后代”选择器</title>
<style type="text/css">
    span{
        color: blue;
    }

    p span{
        color: red;
    }
</style>
</head>
<body>
<div>一代<p>二代<span>三代<span>四代</span></span></p></div><br/>
<span>一层一代</span><br/>
<span>也是一层一代</span><br/>
</body>
</html>

p span p标签下面的所有的span标签都具有的属性

3 “子”选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>“子”选择器</title>
<style type="text/css">
    div>span{
        color: pink;
    }
</style>
</head>
<body>
<div>
    <span>儿子</span>
    <p><span>孙子<span>重孙子</span></span></p>
</div>
</body>
</html>

div>span 仅限于div下面直系孩子span才有

CSS 的继承特性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS的继承特性</title>
<style type="text/css">
    .c{
        color: red;
    }
</style>
</head>
<body>
<h1>Java技术</h1>
<ul>
    <li class="c">网页基础
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>动态网页</li>
    <li>J2EE框架</li>
</ul>
</body>
</html>

li具有的属性，其内部所有的标签就都具有该属性，li具有继承性的
ps:并不是所有的标签都有继承性

CSS 的层叠特性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS的层叠特性</title>
<style type="text/css">
    p{
        color: blue;
    }

    .red{
        color: red;
    }

    #p3{
        color: green;
    }

</style>
</head>
<body>
<p>第一行文本</p>
<p class="red">第二行文本</p>
<p class="red" id="p3">第三行文本</p>
<p style="color: orange;" class="red" id="p3">第四行文本</p>
</body>
</html>