css设置二级子元素样式,css定义样式的两种方式

CSS怎么让子元素叠在父元素的上面

给子元素做定位。用position标签

10年积累的网站建设、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站后付款的网站建设流程，更有纳雍免费网站建设让你可以放心的选择与我们合作。

示例：

html

head

style type="text/css"

p.pos_abs

{

position:absolute;

left:100px;

top:150px

}

/style

/head

body

p class="pos_abs"通过绝对定位，元素可以放置到页面上的任何位置。这段话设定为距离页面左侧 100px，距离页面顶部 150px。

/p

/body

/html

方法属性设置：positon:absolute; left:100px; top:150px;

还可以用right 和 bottom left距离左边的意思 right距离右边的意思，top距离顶部的意思，bottom距离底部的意思。

这里要解释一下position有5个值可以选择，分别对应不同的页面进行设置

absolute ：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative ：生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static ：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit ：规定应该从父元素继承 position 属性的值。

外联CSS，如何进行元素样式的结构化分类定义？

外联CSS与页面内部定义CSS方法是一样的，不同的只是一个引用.css文件，另一个是写在页面内部。

其中优先级顺序是：

元素内部 页面内部 外联

举个外联CSS的例子：

新建一个文本文件，保存为xxx.css，如style.css

修改文件内容：

DIV {background-color:red;/*....通用样式定义....*/}

DIV UL LI {color:#999999;/*....通用样式定义....*/}

DIV.ABC {background-color:green;/*....专用类定义....*/}

DIV.DEF {background-color:black;color:white;/*....专用类定义....*/}

DIV.ABC UL LI{color:white;/*....专用类定义....*/}

DIV.ABC LI.A1{font-size:10px;/*....专用类定义....*/}

DIV.ABC LI.A2{font-size:20px;/*....专用类定义....*/}

DIV.ABC LI.A3{font-size:30px;/*....专用类定义....*/}

保存在与html同级目录下（其他目录也可以，只不过在引用的时候需要把路径写清楚。）

在html文件的head/head中加入：

link href="style.css" rel="stylesheet" type="text/css" /

html中的body部分写成：

DIV class=ABC

div class=DEF标题/div

ULli class=A1..../li

li class=A1..../li

/UL

/DIV

DIV class=ABC

div class=DEF标题/div

ULli class=A2..../li

li class=A2..../li

/UL

/DIV

DIV class=ABC

div class=DEF标题/div

ULli class=A3..../li

li class=A3..../li

/UL

/DIV

DIV

div标题/div

ULli..../li

li..../li

/UL

/DIV

保存以后，打开html,看看是否是你想要的效果？

【高分悬赏】css子元素样式为何无法起作用？

这是因为上面那个 .navlist a 的优先级比 .home 高（因为它是双选择器优先级累加），所以 .home 的样式不起效。

改成这样既可

.navlist a.home{color:red;}