CSS、JS、jQuery中选择器总结

Agiser0 / 2023-05-12 / 原文

CSS、JS、jQuery中选择器总结

CSS中选择器：

1.元素选择器：根据标签名来选中指定元素
语法：标签名{}

2.将被指定的元素设为不同样式
ID选择器，根据元素的ID属性值选中一个元素
语法：#ID属性值{}
设置了重复的ID也可设置同样的效果

3.class 标签属性；每个标签都有和ID类似但其可以重复使用
ID像身份证号；class像班级
用class为元素分组
类选择器：根据元素的class属性值选中一组元素；可以为一个元素添加多个class值在“ ”内；用空格隔开
语法：.class属性值

4.通配选择器：选中页面中的所有元素
语法：*

/*5、属性选择器*/
/* 存在 title 属性的 <a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在 href 属性并且属性值包含"example"的 <a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的 <a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在 class 属性并且属性值包含单词"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

属性选择器 - CSS：层叠样式表 | MDN (mozilla.org)

JS中选择器
JS属性选择器
属性选择器

const agree = document.querySelector('[name = agree]')

jQuery选择器