CSS(三) 高级特性

来源：互联网发布：1-10抽奖概率算法编辑：程序博客网时间：2024/06/17 19:06

复合选择器

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>

层叠样式的规则：
行内样式> ID 样式> 类别样式> 标记样式
所以最后的显示效果为:

阅读全文

0 0