本文主要是介绍006---css复合选择器(交集选择器,并集选择器,后代选择器,子元素选择器,属性选择器,伪元素选择器),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
复合选择器是由两个或读个基础选择器,通过不同的方式组合成的,目的是为了可以选择更准确的目标元素。
一、交集选择器
例如:
<div class="orange">I am P1</div>
<p class="orange">I am P2</p>
.orange {color: orange;
}
p.orange {font-size: 40px;
}
效果是:
p.orange {font-size: 40px;
}
这段代码的p.orange{}就是交集选择器, 中间没用空格。
图解:
二、并集选择器
并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器,都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以使用并集选择器、
语法:
例如:
<div>I am P1</div>
<p>I am P2</p>
div,
p {color: orange;
}
效果:
图解:
三、后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代。其写法就是把外层标签写在前面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
例如:
<p>I am P1</p>
<div><p>I am P2</p>
</div>
p {color: skyblue;
}div p {font-size: 40px;
}
效果展示:
图解:
四、子元素选择器
子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面,子级标签写在后面,中间跟一个“>”进行连接,注意,符号左右两侧各保留一个空格。
例如:
<ul class="nav"><li> 一级菜单<ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li>
</ul>
.nav > li {color: skyblue;
}
效果是:
但是样式为:
.nav li {color: red;
}
.nav > li {color: skyblue;
}
效果却是这样:
像第二个样式,子级元素选择器会覆盖后代选择器,但是只覆盖了一级菜单(.nav的儿子)。
五、属性选择器
例如:
<a href="#" title="aa">百度</a>
<a href="#" title="bb">新浪</a>
<a href="#">jj</a>
<a href="#">yy</a>
<a href="#">xx</a>
a[title] {color: skyblue;
}
效果展示(只选中a标签里有title属性的a标签):
又例如:
<input type="text" value="输入">
<input type="text" value="输入">
<input type="text" value="输入">
<input type="submit">
<input type="reset">
<input type="button" value="按钮">
input[type="text"]{color: red;
}
此时属性均为type,那么选出文本框进行添加样式,就如上选择,效果展示:
对于后面三个,就是,选择属性值具有相同的字符(可以不完全相等),进行添加样式。如,对于第四个,有class="font12",class="font22",class="font32",这三个class的属性值的首几个字母均为“font”,这样就可以通过 标签名(如div), div[class^=font]{ color:red;} 进行设置样式。其他两个类似。
六、伪类选择器
1. E::first-letter文本的第一个单词或字
2. E::first-line文本的第一行
3. E::selection可改变选中文本的样式
注意:“:”一个冒号是伪类选择器,“::”两个冒号是伪元素选择器。
对于第三个,效果是如下图:
当鼠标对文字进行选择的时候,实现E::selection的样式。
4. E::before和E::after(△重要)
在E元素内部的开始位置和结束位置创建一个元素,该元素为行内元素,且必须结合content属性使用。
div::before {content: "开始";
}
div::after {content: "结束";
}
E:after和E:before在高版浏览器下自动识别为E::after和E::before。
如:
<div>今年</div>
div::before {content: "我";
}
div::after {content: "18岁";
}
效果如下:
第二个图表示插入的文字在div里。
这篇关于006---css复合选择器(交集选择器,并集选择器,后代选择器,子元素选择器,属性选择器,伪元素选择器)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!