css选择器进阶:

1、 属性选择器、属性和值选择器
2、 相邻兄弟选择器
3、 后代选择器(包含选择器)
4、 子元素选择器
5、 选择器分组


1、属性选择器、属性和值选择器:

/*1、 为带有 title 属性的所有元素设置样式: */
[title]
{
color:red;
}
/*2、 为 title="haha" 的所有元素设置样式: */
[title=haha]
{
border:5px solid blue;
}
/*3、 为 title的属性值中包含指定词汇的所有元素设置样式,适用于由空格分隔的属性值 */
[title~=haha]
{
border:5px solid blue;
}
/*4、 为 title属性以指定值开头的元素设置样式,该值必须是整个单词(不能是一个单词的一部分)适用于由连字符分隔的属性值 */
[title|=haha]
{
border:5px solid blue;
}

2、相邻兄弟选择器:

可选择紧接在另一元素后的元素,且二者有相同父元素

/* 选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素 */
h1 + p {margin-top:50px;}

3、后代选择器(包含选择器):

后代选择器可以选择作为某元素后代的元素,以空格分隔。


4、子元素选择器:

子元素选择器(Child selectors)只能选择作为某元素子元素的元素,不能隔代,用 “ > ”来指向子代

h1 > strong {color:red;}

5、选择器分组):

用逗号分隔



版权声明:本文为weixin_42794873原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_42794873/article/details/109206306