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: #;

margin:  auto;

max-width: 1128px;

font-weight: bold;

font-family: Verdana,Arial,Helvetica,sans-serif;

box-shadow: 1px 2px 5px 1px #;

}

B.对应文件结构

C:下面display为什么要加important

.main-navigation a {

color: #5e5e5e;

//为什么要加!important

padding:  15px!important;

}

加!important就表示提升这个属性的优先级比如说你如果在其它地方又写了一个display:inline之类的还会按照你这里的block进行解释
另外IE6是不认!important的可以利用这个特性来给不同的浏览器做不同的css设置

D.css防止中文乱码

E.<div style="clear:both;"></div>

<div style="clear:both"></div>
clear:both该属性的值指出了不允许有浮动对象的边。
通俗的讲：这段代码的做用是：清除同行元素，不允许其它元素与之在一行内。

巴特西

css简单学习属性3---css属性选择器

最新文章

热门文章