前端选择器

最新推荐文章于 2024-07-14 14:30:44 发布

lOADIN!

最新推荐文章于 2024-07-14 14:30:44 发布

阅读量818

点赞数

分类专栏：前端文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_51114151/article/details/122817242

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS中各种选择器的用法，包括元素选择器、属性选择器、ID选择器、类选择器、包含选择器、子选择器、兄弟选择器以及选择器组合。通过实例展示了如何使用这些选择器来定位和样式化页面元素，帮助理解并提升前端CSS布局和设计能力。

摘要由CSDN通过智能技术生成

前端中选择器的种类有很多：id选择器 class选择器兄弟选择器包含选择器选择器组合等。

css语法：

selector{

property1:value1;

property2:value2;

...:...;

}

具体用法：

/*元素选择器 E{}*/


 div {
    background: red;
}
*{
    margin:0;
    padding:0
} //全部的都被选中


/* 属性选择器 E[attr]{}*/


/*div[id^=zz] {
    background: red;
}*/表示前缀带有zz的


/*div[id$=zz] {
    background: red;
}*/


/* div[id*=zz] {
    background: red;
} 所有带zz的


/*div[id=zz] {
    background: red;
}*/只选择一个是zz的


/* id选择器 */


/* #zz {
    background: linear-gradient(90deg, red, blue, yellow);
} */ID是zz的


/* class选择器 */


/* .gs {
    background: magenta;
} */class选择器没有空格


/* 包含选择器 selector1 selector2{} */


/* div .gs {
    background: red;
} */包含选择器有空格


/* 子选择器 selector1>selector2{}*/


/* div>div>p {
    background-color: red;
} */


/* 兄弟选择器 selector1~selector2{} 只找弟弟，不找哥哥*/


/* .java~.php {
    background: red;
} */


/* 选择器的组合  selector1,selector2,...{} */


/* div,
p,
span {
    background: red;
} */