第三节元素选择器

来源：互联网发布：华大基因数据库编辑：程序博客网时间：2024/06/05 05:27

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

3.1 元素选择器

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

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div{
            font-size:24px;
            color:red;
        }
        p{
            font-size:32px;
            color:blue;
        }
    </style>
</head>
<body>
    <div>元素选择器</div>
    <p>元素选择器1</p>
    <p>元素选择器2</p>
</body>

3.2 id选择器

顾名思义，是根据id来选择元素，其样式定义形式为：

#idname{

……

}

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:red;
        }
        #div2{
            width:200px;
            height:200px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

显示结果为上红下蓝

3.3 类选择器

根据class属性来选择元素，其样式定义形式为：

.className{

……

}

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .even{
            width:200px;
            height:200px;
            background-color:red;
        }
        .odd{
            width:200px;
            height:200px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class="odd"></div>
    <div class="even"></div>
    <div class="odd"></div>
</body>

显示结果为：上蓝中红下蓝

从结果可以看出: .odd{……}定义的样式会施加到所有class="odd"的元素上，比如上例中的第一个和第三个<div>，当然也包括class="odd"的<p>。

3.4属性选择器

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

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

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        [title]{
            width:100px;
            height:50px;
            background-color:red;
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div title="div1">1</div>
    <div title="div2">2</div>
    <div >3</div>
    <div title="a div">4</div>
    <div title="div a">5</div>
</body>

从结果可以看出，所有具有title属性的元素都应用了红色背景色的样式。

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

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        [title='div2']{
            width:100px;
            height:50px;
            background-color:red;
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div title="div1">1</div>
    <div title="div2">2</div>
    <div >3</div>
    <div title="a div">4</div>
    <div title="div a">5</div>
</body>

从结果可以看出，只有第二个div应用了红色背景的样式，因为只有第二个div的title属性等于div2

~=：选中属性值包含指定完整单词的元素,类似word中的全字匹配

title ^= 'div':选中title属性值以'div'开头的元素

title $= 'div':选中title属性值以'div'结尾的元素

title *= 'div':选中title属性值包含'div'的元素

阅读全文

0 0

第三节 元素选择器

第三节元素选择器