选择器

最新推荐文章于 2024-01-14 11:54:30 发布

燃烧岁月-------

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量1.8k

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/yangwenlongsss/article/details/75092337

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

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

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>