css元素选择符

<!DOCTYPE html>          <!--通用选择符-->
<html><head><style type="text/css">*{background-color:#5e4a25;color:#eedc80;}</style><title>朱坚强威武霸气</title></head><body><h1>通用选择符*</h1><p>这里*表示全部</p><p>对所有元素起作用</p></body>
</html><!DOCTYPE html>          <!--标记选择符-->
<html><head><style type="text/css">p{background-color:#5e4a25;color:#eedc80;}</style><title>朱坚强威武霸气</title></head><body><h1>通用选择符*</h1><p>这里不起作用</p></body>
</html><!DOCTYPE html>      <!--类选择符-->
<html><head><style type="text/css">.s1{background-color:#5e4a25;color:#eedc80;}p.s2{background-color:#d0dbf3;color:#5e4a25;}</style><title>朱坚强威武霸气</title></head><body><h1  class="s1">类选择符，应用了样式s1</h1><h2>没有引用样式</h2><p class="s1">段落引用了样式s1</p><p class="s2">段落引用了样式s2</p><p>段落没有引用样式</p></body>
</html><!DOCTYPE html>             <!--id选择符-->
<html><head><style type="text/css">#s1{background-color:#5e4a25;color:#eedc80;}p#s2{background-color:#d0dbf3;color:#5e4a25;}</style><title>朱坚强威武霸气</title></head><body><h1  id="s1">id选择符，应用了样式s1</h1><h2>没有引用样式</h2><p id="s1">段落引用了样式s1</p><p id="s2">段落引用了样式s2</p><p>段落没有引用样式</p></body>
</html>伪类选择符<html>                        <!--dd效果不显示 显示的是p和儿子的--><head><style>#dd #p{background-color:blue;color:yellow;}</style><title>朱坚强威武霸气</title></head><body><h1>后代选择器：</h1><div id="dd"><span id="s">子s</span><p id="p">子p<span>子子s</span> </p><div id="d">子d</div><p>选择器外部的P不受影响</p></div></body>
</html><html>                                   <!--只有孙子的执行--><head><style>div>p>span{color:yellow;}</style><title>朱坚强威武霸气</title></head><body><h1>后代选择器：</h1><div id="dd"><p>大儿子<span>大孙子</span><p>大外孙</p></p><p>二儿子<span>二孙子</span></p></div></body>
</html>

结束。。。大大的END***

html与css第四天相关推荐

如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
P21-前端基础-CSS颜色四种表示方式
P21-前端基础-CSS颜色四种表示方式 1.概述颜色单位: 在CSS中可以直接使用颜色名来设置各种颜色比如:red.orange.yellow.blue.green - - 但是在css中直接使 ...
引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
CSS的四种引入方式
1.使用link标签引入css文件: <head><link rel="stylesheet" type="text/css" href=&q ...
【转载】HTML导入css的四种方式
原始链接在HTML中引2113入CSS的方法主要有四种5261,它们分别是行内式.内嵌式.链4102接式和导入式.1653 1.行内式行内式是在标记的style属性中设定CSS样式.这种方式没有体 ...
2014年度辛星解读css第四节
接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了css之后再完好它. ************** ...
css button 四种状态,css中按钮的四种状态
css中按钮有四种状态普通状态 hover 鼠标悬停状态 active 点击状态 focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框下面的 ...
dwcss样式中英对照_DW中常用css样式四种类型详细解析说明
css 样式加载 css 样式类型有以下四种一.外部样式格式: 路径 " /> 举例: 用处:这种形式是把 css 单独写到一个 css 文件内,然后在源代码中以 link 方 ...
CSS第四篇(复合选择器)
1.后代选择器概念:后代选择器又称为包含选择器作用:用于选择元素或元素的子孙后代,一个标签之后的所有标签都会选择写法:把外层标签写在前面,内层标签写在后面,中间用空格隔开父级子级{属性:属性 ...

html与css第四天

css元素选择符

html与css第四天相关推荐

最新文章

热门文章