css中的选择器

来源：互联网发布：sqlserver使用教程编辑：程序博客网时间：2024/06/03 18:59

1.基本选择器

<style>        div{            font: "微软雅黑";        }        .a{            font-size:80px ;        }        #div5{            font-size:50px ;            color: yellow;        }    </style>    </head>    <body>        <div class="a">w我是中国人</div>        <div id="div5">w我是中国人</div>        <div>w我是中国人</div>        <div>w我是中国人</div>        <div>w我是中国人</div>    </body>

1元素选择器
div{
样式
}
span{
样式
}
class是选择多个div或者span 用.class值获取
id是获取单个div 用#id值获取

2.其他选择器

1.层次选择器

        <title></title>        <style>        div p{            color: red;        }    </style>    </head>    <body>        <div >w我是中国人</div>        <div ><p>w我是中国人</p></div>        <div>w我是中国人</div>        <div>w我是中国人</div>        <div>w我是中国人</div>    </body>

div里面的p标签样式用
div p{
样式
}

2.属性选择器

    <title></title>        <style>        input [type='text']{            background-color: red;        }        input [type='password']{            background-color: yellow;        }    </style>    </head>    <body>    <input type="text"  name="username"/>    <input type="password" name="password" />    </body>

用属性获取样式
input [type=’text’]{
background-color: red;
}

就近原则

如果

而

引入

可以新建一个css文件存入这些样式然后用连接起来
这是css文件

    <style>        div{            font: "微软雅黑";        }        .a{            font-size:80px ;        }        #div5{            font-size:50px ;            color: yellow;        }    </style>

这是主页面

    <title></title>    <link rel="stylesheet" href="1.css" />     </head>    <body>        <div class="a">w我是中国人</div>        <div id="div5">w我是中国人</div>        <div>w我是中国人</div>        <div>w我是中国人</div>        <div>w我是中国人</div>    </body>

阅读全文

0 0