CSS选择器

来源：互联网发布：网络女主播闪现编辑：程序博客网时间：2024/06/07 06:52

今天学习了CSS中的选择器，所谓选择器，指的是选择施加样式目标的方式。选择器也是分为好多种，今天只是学习了其中的几种，让我们一起来回顾下。

1、元素选择器

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

<styletype="text/css">
        div{
            font-size: 25px;
            color: blue;
        }
        p{
            font-size: 32px;
            color: purple;
        }
    </style>
</head>
<body>
<div>元素选择器</div>
<p>元素选择器1</p>
<p>元素选择器2</p>
</body>

2、id选择器

是根据设置的id属性来选择元素，其样式定义为：

#idname{

.......

}

3、类选择器

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

.className{

........}

.odd{
    width: 200px;
    height: 200px;
    background-color: bisque;
}
.even{
    width: 200px;
    height: 200px;
    background-color: lightskyblue;
}

<divclass="odd"></div>
<divclass="even"></div>
<divclass="odd"></div>

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

4、属性选择器

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

<styletype="text/css">
        [title]{
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 2px solid purple;
        }
    </style>
</head>
<body>
<divtitle="div1">1</div>
<divtitle="div2">2</div>
<div>5</div>
<divtitle="a div">3</div>
<divtitle="div a">4</div>

属性选择器中还有其他的一些符号来选中这些属性，会显示不同的结果，在这里就不一一列举了，有机会在详细的写上来，最后希望我以后会更好。

阅读全文

0 0