干货:CSS分组和嵌套选择器

开课吧开课吧锤锤2021-04-13 14:08

    前端是互联网时代直接接触用户的窗口,大到我们每天都要浏览的网站,小到一次点击一个按钮的页面,前端到处都是。而且在产品开发的众多环节中,最能让用户直观感受到的是前端开发。因此前端行业广阔的发展前景也吸引了不少人转行学习。那零基础的人怎么学习网络前端呢?

web

    CSS分组和嵌套选择器

    分组选择器

    在样式表中有很多具有相同样式的元素。

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}

    为了尽量减少代码,你可以使用分组选择器。

    每个选择器用逗号分隔。

    在下面的例子中,我们对以上代码使用分组选择器:

h1,h2,p
{
    color:green;
}

    嵌套选择器

    它可能适用于选择器内部的选择器的样式。

    在下面的例子设置了三个样式:

    p{}:为所有p元素指定一个样式。

    .marked{}:为所有class="marked"的元素指定一个样式。

    .markedp{}:为所有class="marked"元素内的p元素指定一个样式。

    p.marked{}:为所有class="marked"的p元素指定一个样式。

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

    前端学习永远不会是单枪匹马,需要前人的引领,也需要平台的不断交流与思想碰撞。这能够快速入门,减少走弯路,还能让自己找到问题的根源。更多的Web教程尽在开课吧广场Web教程频道。

有用
分享