文章目录

• CSS第二课-复杂选择器
• 群组选择器
• 属性选择器
• 根据属性名查找元素
• 根据属性值查找
• 多属性选择器
• 根据属性值近似查找
• 根据标签查找
• 派生选择器
• 后代选择器
• 子元素选择器
• 相邻兄弟选择器

CSS第二课-复杂选择器

群组选择器

格式

选择器1,选择器2,,,选择器n{声明的属性和属性值}

p,h1{
    color: blue;
}




用于对于多个选择器进行样式修改，由简单选择器组合而成的选择器，可以是简单选择器中的任意组合，如上面代码例，就是修改了p标签和h1标签的字体颜色。

属性选择器

根据属性名查找元素

格式

元素[属性名]{
    声明的属性和属性值;
}




p[id]{
    color: blue;
}




前面添加元素的名字，然后后面加上属性名，比如上例，就是p标签，其中带有id的元素，然后把字体颜色设置为蓝色。

根据属性值查找

格式

元素[属性名=属性值]{
    声明的属性和属性值;
}




p[class = 'p2']{
    color: blue;
}




和上面的根据属性名查找差不多，只不过更加了，到了属性名后面的属性值，上例就是作用于p标签，只不过条件是为带有class属性，并且属性值为p2的p标签。

多属性选择器

格式




元素[属性名或属性表达式][属性名或属性表达式]..{
    声明的属性和属性值;
}

p[title][class]{
    color: blue;
}







元素后面加。属性名或属性表达式，可以加+∞个，但是没必要。上例为：设置title属性和class属性的段落p标签的样式

根据属性值近似查找

格式




元素[元素名~=属性值]{
    声明的属性和属性值;
}




元素[属性名|=值]{
    声名的属性和属性值;
}




p[class~='red']{
    color: blue;
}







注意，这里是~=，为约等于，就是找满足符合约等于条件的标签，上例为：设置class属性的值，包含red属性名的标签

根据标签查找

格式




元素名1~元素名2{
    声名的属性和属性值;
}




a~p{
    color: blue;
}




a标签后面的每一个p标签，都进行了样式的修改。

派生选择器

后代选择器

格式




父类标签 子类标签{ /*注意俩标签中间有空格*/
    声名的属性和属性值;
}




div strong{
    color: blue;
}




相邻兄弟选择器

格式




父标签+子标签{
    声名的属性和属性值;
}




#div1 + p{
    color: blue;
}




相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。










————————————————
版权声明：本文为CSDN博主「董小宇」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lolly1023/article/details/105413125