css简单学习属性3---css属性选择器
1：通配符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[id*=div] {
color: lime;
}
/*^首字符*/
[id^=div] {
color: darkblue;
}
/*$结束字符*/
[id$=ym] {
color: crimson;
}
</style>
</head>
<body>
<div id="mydiv1">示例文本1</div>
<div id="div2">示例文本2</div>
<div id="div3">示例文本3</div>
<div id="div4">示例文本4</div>
<div id="my">示例文本5</div>
</body>
</html>
2:UI伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 鼠标经过有效 */
input[type="text"]:hover{
background-color: darkviolet;
/* 鼠标焦点有效 */
input[type="text"]:focus{
background-color: darkviolet;
}
</style>
</head>
<body>
<input type="text" name="name">
<input type="text" name="name">
</body>
</html>
3:结合元素选择器:
例如: a.class{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a.div{ color: red; } </style> </head> <body> <div class="div"> wowowotest </div> /* 只对下面有效 */ <a class="div"> wowowotest</a> </body> </html>
4:多类选择器
例如: .class.class{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ color: blue; } .div2{ font-size: 30px; } .div1.div2{ font-style: italic; } </style> </head> <body> <div class="div1">wowowo test</div> <div class="div2">wowowo test</div> /* 拥有上面所有属性 */ <div class="div1 div2">wowowo test</div> </body> </html>
5:属性选择器
例如: [title]{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[title]{
color: aqua;
}
[href]{
font-size: 30px;
}
[title="p2"]{
color:red;
}
</style>
</head>
<body>
<p title="">hello</p>
<p title="p2">hello2</p>
/* <href=""未带参数，如果带参数。<style>必须一致>*/
<a href="">wowowo</a>
</body>
</html>
A：在css中定义图片相对路径
#primary-nav { //相对路径 background: url(../images/alert-overlay.png) repeat-x; height: 35px; font-size: 10px; color: #fff; line-height: 34px; background-color: #222; margin: 0 auto; max-width: 1128px; font-weight: bold; font-family: Verdana,Arial,Helvetica,sans-serif; box-shadow: 1px 2px 5px 1px #808080; }
B.对应文件结构
C:下面display为什么要加important
.main-navigation a { color: #5e5e5e; //为什么要加!important padding: 0 15px!important; }
加!important就表示提升这个属性的优先级 比如说你如果在其它地方又写了一个display:inline之类的 还会按照你这里的block进行解释
另外IE6是不认!important的 可以利用这个特性来给不同的浏览器做不同的css设置
D.css防止中文乱码
E.<div style="clear:both;"></div>
<div style="clear:both"></div>
clear:both该属性的值指出了不允许有浮动对象的边。
通俗的讲：这段代码的做用是：清除同行元素，不允许其它元素与之在一行内。
