CSS选择器

来源：互联网发布：网络语61和69什么意思编辑：程序博客网时间：2024/06/06 00:05

选择器

所谓的选择器，指的是选择器施加样式目标的方式。

1 元素选择器

用标签名作为选择器，选中所有相应的元素。

<style type="text/css">
    div{
        font-size:30px;
        color:#3695ff;
    }
    p{
        font-size:50px;
        color:#a1ff54;
    }
</style>

<body>
<div>元素选择器</div>
<p>元素选择器1</p>
<p>元素选择器2</p>
</body>

2 id选择器

顾名思义就是根据id来选择元素，只能被引用一次。

形式为：#idname{...}

<style type="text/css">
    #div1{
        width:200px;
        height:200px;
        background-color:#a1ff54;
    }
    #div2{
        width:200px;
        height:200px;
        background-color:#ff1919;
    }
</style>

<body>

</body>

3 类选择器

根据class属性来选择元素，可以被引用多次。

形式为：.classname{...}

.odd{
    width:200px;
    height:200px;
    background-color:#a1ff54;
}
.even{
    width:200px;
    height:200px;
    background-color:#ff1919;
}

</style>

</body>

从结果可以看出类选择器定义的样式会施加到所有class=""中。

4 属性选择器

根据某个属性的特性（比如有无、值得等）来选择。

（1）根据有无某属性来选择

<style type="text/css">
        [title]{
            width: 100px;
            height: 50px;
            background-color: #3695ff;
            border: 1px solid;
        }
</style>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="adiv">4</div>
<div title="diva">5</div>
</body>

从结果可以看出。所具有title属性的元素都应用了该样式。

（2）根据属性的值来选择

<styletype="text/css">
        [title="div2"]{
            width:100px;
            height:50px;
            background-color:#3695ff;
            border:1px solid;
        }
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>

</body>

[title~="div"]

选中属性值包含指定完整单词的元素，只有

<div title="adiv">4</div>
<divtitle="div a">5</div>才能引用该样式

[title^="div"]

结果会选中以div开头的1，2，5

[title$="div"]

结果会选择不是以div开头的

[title*="div"]

包含div的

5 结构选择器(关系选择器)

（1）后代选择器，可以选择一个元素的后代元素，只要是包括在里面的用一个标签，都有效。

写法：.父标签子标签。就是在父标签里找到所有子标签。

<h1>高温橙色预警</h1>
<div class="content">
<p><ahref="http://www.baidu.com/">中央气象台</a>2013年8月11日18时继续发布高温橙色预警，这是自2007年开始有高温预警机制后，中央气象台首次连续18天发布高温最高级别预警信号。</p>
<a href="http://www.baidu.com/">前往现场</a>
</div>
<a href="http://www.baidu.com/">查看原文</a>

（2）子元素选择器。找到父元素的下一级，可以有很多的下一级标签，但是要是平级关系。

写法：. 父标签 > 子标签

<a href="http://www.baidu.com/">前往现场</a>
</div>
<a href="http://www.baidu.com/">查看原文</a>

6并选择器（组合选择器）

将相同的样式一起，类名用逗号隔开

写法：.classname,.classname{}

7通配符选择器 *

可以选中页面中所有的标签。对页面上所有的元素进行初始化。用的不是太多。

写法：*{}

清空浏览器自带的样式边框。例如：清空边距

<style type="text/css">
    *{
           padding:0;
           margin:0px;
       }
</style>

8弟弟选择器

（1）选择一个弟弟（就是同级别的），只选择离他最近的一个，只会往下找，不会往上找。

写法：.classname + 标签

（2）选择下面所有的弟弟

写法：.classname ~ 标签

阅读全文

0 0