首页 > 代码库 > css定位 与选择器
css定位 与选择器
一、CSS三种定位方式：
1）流式定位:HTML不指定任何位置的定位方式;
2）float定位：<imag style=”float:right/left/none”/> float的取值有3个值；
3）相对定位：
position:relative;left:-20px;buttom:-30px;
相对定位是相对于其父元素的位置而言的；
4) 绝对定位:
position:absolute;left:-20px;botton:-20px;
绝对定位是相对已经指定了位置的父元素的位置而言的；
.）例子1
<div>
<p style=” position:absolute;left:-20px;botton:-20px;” >定位</p>
</div>
此时p是绝对定位，它的父元素<div>没有指定过位置，那么<p>的位置就相对于浏览器的<body>定位的，所以叫绝对定位；
。）例子2
<div position:absolute;left:20px;botton:20px;>
<p style=” position:absolute;left:-20px;botton:-20px;” >定位</p>
</div>
此时p是绝对定位，它的父元素div也定了位置，那么p的定位是相对于div的位置而
言的；
二、Css样式选择器：
元素选择器：如 th,td{border: 1px solid blue} 表示元素th,td都有这样的选择器；
例子：p,th,td{border:1px solid blue}
P{background-color:red}
这样p标签就有两种样式了；
类选择器： *.important{color:red} *表示class为important的任何元素样式；
也可以写成p.important{color:red} 表示class为important的p元素的样式；
<p class=”important warning”> 表示p元素拥有两个类样式
Id选择器：
*#important{color:red} 表示id为important的任何元素的样式
属性选择器：
*[title] {color:red} 表示包含了title属性的任何元素的样式；
嵌套选择器：
.) P em {color:red} 表示在p元素里面的em元素的样式；(元素之间不是用逗号而是用空格隔开的)；
比如：
<p><em></em>
<i><em></em></i>
</p>
这两个em元素都能添加上面的样式；
.) P> em {color:red} 这样表示必须是紧挨着p的子元素为em的元素才起作用；
.) h1 +p {color:red} 表示h1元素后面紧邻的那个p元素才起作用; h1和p是同级的元素，
这叫相邻的兄弟选择器；
元素的伪类选择器：
a : visited{color:#000000}
a : link
a : hover
a : active
*.red : visited {color: red} ---表示带有red类的任何元素的伪类选择器visited;
本文出自 “小李广之博客” 博客，请务必保留此出处http://6817977.blog.51cto.com/6807977/1584583
css定位 与选择器