1.CSS的复合选择器
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器
2.后代选择器
后代选择器可以选择父元素里面的子元素
元素1 元素2 { 样式声明 }
选择的元素1里面的所有元素2(后代元素)
3.子选择器
子元素选择器只能选择作为某元素最近一级的子元素。
元素1 >元素2 { 样式声明 }
4.并集选择器
并集选择器可以选择则多组标签,同时为他们定义相同的 标签。通常用于集体声明。
并集选择器是各选择器通过英文逗号,连接而成,任何形式的选择器都可以作为并集选择器的一部分。
元素1,元素2 { 样式声明 }
5.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或者选择第一个,第n个元素。
伪类选择器书写最大的特点是用冒号:表示,比如:hover、:first-child。
(1)链接伪类选择器
<style>
/* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
</style>
<body>
<a href="#">小猪佩奇</a>
<a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>
为了确保生效,请按照LVHA的循顺序声明:link- :visited- :hover- :active。
(2):focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,把获得光标的input表单元素选取出来.
<style>
/* // 把获得光标的input表单元素选取出来 */
input:focus {
background-color: pink;
color: red;
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>