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- 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该属性的值指出了不允许有浮动对象的边。
通俗的讲：这段代码的做用是：清除同行元素，不允许其它元素与之在一行内。