【前端】CSS常见的选择器

CSS(层叠样式表)提供了多种选择器,用于选择要应用样式的 HTML 元素。在CSS中选择器是一种模式,用于匹配HTML文档中的某些元素并且应用到这些元素上。我们可以通过选择器给特定的元素设置样式。

常见的 CSS 选择器

元素选择器(element selector)

类选择器(class selector)

ID选择器(id selector)

属性选择器(attribute selector)

后代选择器(descendant selector)

子元素选择器(child selector)

相邻兄弟选择器(adjacent sibling selector)

通用选择器(universal selector)

**1、元素选择器(Element Selector):**通过元素名称选择 HTML 元素。

如下代码,p 选择器将选择所有 <p> 元素:

css 复制代码
p {
  color: red;
}

**2、类选择器(Class Selector):**通过类别名称选择具有特定类别的 HTML 元素。

类选择器以 . 开头,后面跟着类别名称。

如下代码,.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

css 复制代码
.highlight {
  background-color: yellow;
}

**3、ID 选择器(ID Selector):**通过元素的唯一标识符(ID)选择 HTML 元素。

ID 选择器以 # 开头,后面跟着 ID 名称。

如下代码,#csdn选择器将选择具有 ID 为 " csdn**"** 的元素。

css 复制代码
#csdn {
  width: 200px;
}

**4、属性选择器(Attribute Selector):**通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

如下代码,input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

css 复制代码
input[type="text"] {
  border: 1px solid gray;
}

**5、后代选择器(Descendant Selector):**通过指定元素的后代关系选择 HTML 元素。

后代选择器使用空格分隔元素名称。

如下代码,div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

css 复制代码
div p {
  font-weight: bold;
}

6、子元素选择器(Child Selector): 通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 > 符号分隔父元素和子元素。例如,ul > li 选择器将选择所有 <ul> 元素的直接子元素中的 <li> 元素。

css 复制代码
<ul>
    <li>姓名</li>
    <li>电话</li>
</ul>


ul > li {
    background-color: yellow;
}

7、相邻兄弟选择器(Adjacent Sibling Selector): 通过指定元素之间的相邻兄弟关系选择 HTML 元素。相邻兄弟选择器使用 + 符号分隔两个相邻元素,且二者有共同的父元素。例如,h2 + p 选择器将选择紧接在 <h2> 元素后的 <p> 元素。

css 复制代码
<h2>这是html的2级标题</h2>
<p>这是一个段落</p>
 
 
h2 + p {
  color: red;
}

8、通用选择器(Universal Selector): 选择所有 HTML 元素。通用选择器使用 * 符号。例如,* 选择器将选择页面上的所有元素。

通用选择器会匹配页面所有的元素给所有的元素设置样式;在编写代码的时候应该避免使用通用选择器,因为过多的使用通用选择器会使得页面加载缓慢。

css 复制代码
* {
  border: 1px solid gray;
}
相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js