Login
网站首页 > 文章中心 > 其它

CSS选择器_基本选择器和组合选择器)详解

作者:小编 更新时间:2023-10-04 19:50:32 浏览量:322人看过

CSS选择器是一组用于选择HTML或XML文档中特定元素的字符串.在开发过程中,CSS选择器用于为元素应用样式、执行JavaScript操作、或在DOM中对选定元素进行查询.

CSS选择器可以分为基本选择器和组合选择器.

基本选择器

标签选择器是在CSS规则中使用最广泛的选择器,它根据HTML代码中的标签名称来选择元素.

代码示例:


p {
color: red;
}

在HTML标记页面元素时,我们可以指定一个id属性来唯一标识某个元素.id选择器使用id属性值来匹配元素.


#header {
background: blue;
}

类选择器可以根据HTML代码中的一到多个class来选择元素.类选择器以"."方式引用.


.warning {
background: yellow;
}

属性选择器基于元素属性的值为元素选择器一个样式,它根据元素是否有某个属性、该属性的值是否对应特定的值、或属性值是否以某些特定的内容开头来进行选择.


a[target="_blank"] {
  background-color: yellow;
}

通用选择器可以匹配文档中的任何元素.


* {
margin: 0;
padding: 0;
}

组合选择器

后代选择器用于选择某个元素下的所有子元素.



子选择器用于选择某个元素下的直接子元素.


ul > li {
font-size: 14px;
}

相邻兄弟选择器可以选择某个元素之后的第一个相邻兄弟元素.


h1 ◆ p {
font-size: 16px;
}

通用兄弟选择器可以选择某个元素之后的所有兄弟元素.


h1 ~ p {
font-size: 16px;
}

总结:CSS选择器可以让我们精确地选中需要修改样式的HTML元素,并针对这些元素进行样式控制.不同的选择器可以让样式更有目的性.

以上就是土嘎嘎小编为大家整理的CSS选择器_基本选择器和组合选择器)详解相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用,就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦!!

版权声明:倡导尊重与保护知识产权。未经许可,任何人不得复制、转载、或以其他方式使用本站《原创》内容,违者将追究其法律责任。本站文章内容,部分图片来源于网络,如有侵权,请联系我们修改或者删除处理。

编辑推荐

热门文章