CSS进阶知识点--CSS3基本选择器及属性选择器

基本选择器

  • 通配符选择器

  • 元素选择器

  • 类选择器

  • ID选择器

  • 后代选择器

  • 子元素选择器

  • 相邻兄弟选择器

  • 通用兄弟选择器

  • 群组选择器

前五个请参考CSS基础知识点--选择器

子元素选择器

概念

子元素选择器只能选择某元素的子元素

语法格式

父元素 > 子元素(father > child)

相邻兄弟选择器

概念

相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素

语法格式

元素 + 兄弟相邻元素(Element + Sibling)

通用兄弟选择器

概念

选择某元素后面的所有兄弟元素,而且他们具有一个相同的父元素

语法格式

元素 ~ 后面所有兄弟相邻元素(Element ~ Sibling)

群组选择器

概念

群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号","隔开

语法格式

元素1,元素2,...,元素n(Element1,Element2,...,Element3)

属性选择器

对带有制定属性的 HTML 元素设置样式

使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值

Element[attribute]

概念

选择所有带有 attribute 属性元素

Element[attribute~="value"]

概念

选择 attribute 属性有单词"value"的所有元素(属性不止一个属性值,其中一个属性值为"value")

注意:该属性选择器用于选取属性值中包含指定词汇的元素,只要是指定的属性,并且属性值列表中包含value,而不是在某个值中以value开头或结尾

Element[attribute^="value"]

概念

选择 attribute 属性值以"value"开头的所有元素

注意:该属性选择器匹配指定属性的指定value值开头的元素,如果class中有多个value值,第一个值中的第一个字母不是指定的值,即使后面的属性中首字母是指定的值,那么也不能匹配上

Element[attribute$="value"]

概念

选择 attribute 属性值以"value"结尾的所有元素

Element[attribute*="value"]

概念

选择 attribute 属性值包含"value"的所有元素(属性值中的单词包含)

Element[attribute|="value"]

概念

选择 attribute 属性值为"value"或以"value"开头的元素

属性选择器 作用
Element[attribute] 选择所有带有 attribute 属性元素
Element[attribute~="value"] 选择 attribute 属性有单词"value"的所有元素(属性不止一个属性值,其中一个属性值为"value")
Element[attribute^="value"] 选择 attribute 属性值以"value"开头的所有元素
Element[attribute$="value"] 选择 attribute 属性值以"value"结尾的所有元素
Element[attribute*="value"] 选择 attribute 属性值包含"value"的所有元素(属性值中的单词包含)
Element[`attribute ="value"`] 选择 attribute 属性值为"value"或以"value-"开头的元素
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、基本选择器 回顾选择器 通配符选择器、元素选择器、类选择器、ID选择器、后代选择器 新增基本选择器 子元素选择...
    越IT阅读 4,929评论 0 3
  • 一、基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father...
    Leophen阅读 2,823评论 0 0
  • 在爬虫采集数据的过程中,如何定位及匹配数据是必须解决的一项任务。最常用的定位方式有三种:XPATH,CSS选择器及...
    han0710阅读 6,466评论 0 1
  • 基本选择器 子元素选择器 概念:只能选择某元素的子元素 语法:父元素 > 子元素(Father > Childre...
    陈裔松的技术博客阅读 1,222评论 0 0
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,721评论 0 0