美文网首页
属性选择器和子元素选择器

属性选择器和子元素选择器

作者: 骚X | 来源:发表于2018-11-19 19:50 被阅读0次

一、属性选择器

为所有具有title属性的元素,设置一个背景颜色为黄色
属性选择器
作用:可以根据元素中的属性或属性值来选取指定元素
语法:
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含指定内容的元素

p[title]{
background-color:yellow;
}
p[title="hello"]{
background-color:yellow;
}
为title属性值是hello的元素设置一个背景颜色为黄色
p[title^="ab"]{
    background-color: yellow;
    }
为title属性值以ab开头的元素设置一个背景颜色为黄色
p[title$="c"]{
      background-color: yellow;
}
为title属性值以c结尾的元素设置一个背景颜色
p[title*="c"]{
background-color: yellow;
}
为title属性值包含c的元素设置一个背景颜色 

二、子元素选择器

a:first-child{
color:red;
}
a:last-child{
    color:yellow;
}
 a:nth-child(3){
background-color:green;
}
位置是第3个的标签背景为绿色
a:nth-child(even){
    background-color:red;
}
位置是偶数的背景为红色
a:nth-child(odd){
    background-color:yellow;
}
位置为基数的背景为黄色
选择指定类型的子元素
p:first-of-type{
    background-color:blue;
}
类型是p的第一个标签背景为蓝色

p:last-of-type{
    background-color:skyblue;
}
类型是p的最后一个标签背景为天蓝色

p:nth-of-type(3){
    background-color:yellow;
}
类型是p的第三个标签背景为黄色

相关文章

  • jQuery入门(2)

    jQuery选择器 属性筛选选择器 子元素筛选选择器 表单元素选择器 表单对象属性筛选选择器 特殊选择器this ...

  • CSS选择器

    选择器类型 元素选择器 类选择器 ID 选择器 属性选择器 伪类 伪元素 选择器组 后代选择器 子元素选择器 相邻...

  • CSS选择器

    元素选择器 类选择器详解 ID选择器详解 属性选择器详解 后代选择器 子元素选择器 相邻兄弟选择器 CSS派生选择器:

  • CSS3 选择器

    一.子元素选择器 二.属性选择器 三.伪类选择器 四.子元素选择器 div p:nth-child(1)获得div...

  • CSS

    文字相关属性 文本属性 标签选择器 id选择器 类选择器 后代择器 子元素选择器 交集选择器(了解) 并集选择器 ...

  • 00.CSS基础知识回顾

    1.选择器 元素选择器 id选择器 类选择器 属性选择器[属性名]选取含有指定属性的元素[属性名="属性值"]选取...

  • CSS简单总结

    一.属性选择器: 二.后代选择器 三.相邻选择器 四.伪元素选择器 五.display属性: 六.行内元素和行内块...

  • 后代选择器和子元素选择器的区别

    原文 博客原文 大纲 1、后代选择器和子元素选择器的相关概念2、后代选择器和子元素选择器的区别 1、后代选择器和子...

  • jQuery选择器

    基本选择器 层次选择器 过滤选择器 基本过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选...

  • CSS3学习

    基础选择器 伪类&伪元素 选择器 伪元素选择器 属性选择器 状态伪类选择器 结构属性选择器 文字阴影&盒子阴影 文...

网友评论

      本文标题:属性选择器和子元素选择器

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