[分享]css元素选择器命名方式

在CSS中，元素选择器是最基本的一种选择器。它通过HTML元素的标签名来选择相应的元素。元素选择器的命名方式有很多种，下面我们来一一解析。/ 1. 基本命名 / p { fontsize: 16px;...

在CSS中，元素选择器是最基本的一种选择器。它通过HTML元素的标签名来选择相应的元素。元素选择器的命名方式有很多种，下面我们来一一解析。

/* 1. 基本命名 */
p {
  font-size: 16px;
}

/* 2. 祖先选择器 */
.article p {
  font-size: 16px;
}

/* 3. 类选择器 */
.intro {
  font-size: 16px;
}

/* 4. ID选择器 */
#home {
  font-size: 16px;
}

/* 5. 属性选择器 */
a[href="http://www.baidu.com"] {
  font-size: 16px;
}

/* 6. 伪类选择器 */
a:hover {
  font-size: 16px;
}

/* 7. 通配符选择器 */
* {
  font-size: 16px;
}

/* 8. 相邻兄弟选择器 */
p + span {
  font-size: 16px;
}

/* 9. 子元素选择器 */
ul > li {
  font-size: 16px;
}

/* 10. 后代元素选择器 */
ul li {
  font-size: 16px;
} 

基本命名指的是直接使用标签名作为选择器的方式，例如上面的第一条命名方式就是用p标签来选择网页中的段落元素。祖先选择器则是指先选择某一元素，再根据该元素的父元素或以上级别元素来选择。类选择器指通过给HTML元素添加class属性，并在CSS中定义相应的类选择器来选择元素。ID选择器和类选择器类似，但是ID选择器指的是通过给HTML元素添加id属性，并在CSS中定义相应的ID选择器来选择元素。属性选择器则是通过元素的属性值来选择元素。伪类选择器是指基于元素的状态来选择元素，例如上面的a:hover就是表示当鼠标悬停在a标签上时应用样式。通配符选择器则是指选择HTML中所有元素。相邻兄弟选择器表示选择紧接着指定元素后出现的第一个指定元素。子元素选择器则是通过“父元素 > 子元素”的结构来选择元素。后代元素选择器表示选择指定元素下的所有子元素。