美文网首页
CSS进阶知识点--CSS3基本选择器及属性选择器

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

作者: 梦幽辰 | 来源:发表于2019-12-22 15:10 被阅读0次

基本选择器

  • 通配符选择器

  • 元素选择器

  • 类选择器

  • 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-"开头的元素

相关文章

  • CSS和JQuery选择器

    一、 基本选择器 二、组合使用 三、属性选择器 四、 CSS3属性选择器

  • CSS3知识概要总结之选择器篇(二)

    是的,从这里开始我们就开始学习CSS3的选择器了,学习资源CSS3选择器 属性选择器 属性选择器 发现属性选择器真...

  • css

    css基本语法及页面引用 css基本语法 css的定义方法:选择器{属性:值;属性:值;属性:值;}选择器是将样...

  • css3(1)

    之前的css属性选择器包括:类选择器,id选择器,标签选择器,关联选择器,组合选择器,伪类选择器等 css3属性选...

  • 2019前端经典面试题 CSS 部分常见问题

    CSS部分常见问题 1、CSS3选择器有哪些? 答:属性选择器、伪类选择器、伪元素选择器。 2、CSS3新特性有哪...

  • HTML5和CSS3新增内容

    CSS3选择器有哪些? 属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些? 颜色:新增RGBA,HSL...

  • CSS3笔记(一)选择器

    回顾css3之前的选择器 css3选择器 1、属性选择器 2、结构 伪类选择器 注意点 : 选择是分类型,排序是不...

  • ccs(一)

    css选择器 派生选择器 Id选择器 类选择器 属性选择器 css3背景 background-size规定背景图...

  • CSS-选择器7-属性

    CSS选择器-系列文章 1、CSS属性选择器 2、CSS2属性效果演示 运行效果: 3、CSS3属性效果演示 运行...

  • CSS

    CSS基本语法及页面引用 CSS基本语法 css定义的方法是:选择器{属性:值;属性:值;}选择器是将样式和页面元...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/doeinctx.html