CSS 复合选择器_复合选择器总是不生效-CSDN博客

/*将 ol 里面的 li 选出来改变样式*/
/*最终改变的是定义最内层元素的样式*/
ol li {
    font: 20px 'Microsoft Yahei';
}
/*子元素的子元素也是后代，也可以通过后代选择器改变样式*/
ol li a {
    font-size: 20px;
}
/*元素可以是任意基础选择器：标签选择器、类选择器、id选择器、通配符选择器*/
.nav li a {
    font-family: 'Microsoft Yahei';
}

<body>
    <ol>
        <li>要改变的样式</li>
        <li>要改变的样式</li>
        <li>要改变的样式</li>
        <li><a href="#">子元素的子元素也可以改变样式</a></li>
    </ol>    
    <ul>
        <li>不改变的样式</li>
        <li>不改变的样式</li>
        <li>不改变的样式</li>
        <li><a href="#">这个子元素的子元素样式并没有改变</a></li>
    </ul>
    <ul class="nav">
        <li>不改变的样式</li>
        <li>不改变的样式</li>
        <li>不改变的样式</li>
        <li><a href="#">这个子元素的子元素样式可以通过类选择器改变</a></li>
    </ul>
</body>

子选择器（重要）

只能选择作为某元素的最近一级子元素。简单理解就是亲儿子元素

/*选择 .nav 里面的所有直接后代 a */
/* .nav>a */
/*隔代的都不算*/
.nav>a {
    font-size: 20px;
}

<div class="nav">
    <a href="#">亲儿子会改变样式</a>
    <p>
        <a href="#">孙子不会改变样式</a>
    </p>
</div>

并集选择器（重要）

可以选择多组标签，同时为他们定义相同的样式。通常用于集体申明。

并集选择器是各选择器通过英文逗号 "," 连接而成，任何形式的选择器都可以作为并集选择器的一部分

组成并集选择器的各部分选择器的样式都发生了改变

<div>大漠孤烟直</div>
<p>长河落日圆</p>
<span>萧关逢候骑</span>
<ul class="saishang">
    <li>都护在燕然</li>
</ul>

/*约定语法：并集选择器通常竖着写*/
/*对 div 和 p 里面的内容的样式进行更改*/
div, 
p {
    font-size: 20px;
}
/*并集选择器可以对任意类型的选择器的样式进行修改*/
/*对 div p .saishang.li 里面的样式进行更改*/
div, 
p, 
.saishang.li {
    font-family: 'Microsoft Yahei';
}

伪类选择器

用于向某些选择器添加特殊的效果，比如给链接添加特殊效果；或选择第1个，第n个元素

伪类选择器书写最大的特点使用冒号 " : " 表示，比如 :hover、:first-child

伪类选择器有很多，比如链接伪类、结构伪类等

链接伪类选择器（重要）

a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下未弹起的链接）

<a href="#">了却君王天下事，赢得身前生后名，可怜白发生</a>

/*未被访问的链接*/
a:link {
    color: red;
    text-decoration: none;
}
/*已被访问过的链接*/
a:visited {
    color:grey;
}
/*选择鼠标指针定位于其上的链接*/
a:hover {
    color:green;
}
/*选择活动链接（鼠标按下未弹起的链接）*/
a:active {
    color: cran;
}

1. 链接伪类选择器注意事项

2. 链接伪类选择器实际开发中的写法

链接伪类选择器注意事项

1. 为了确保生效，请按照 LVHA 的循环顺序声明：（:link :visited :hover :active）

顺序不能颠倒，如果颠倒，伪类选择器不生效

2. 记忆法：love hate 或者 LV 包包 hao

3. 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独设置样式

链接伪类选择器实际开发中的写法

/* a 是标签选择器,所有的链接 */
a {
    color: gray;
    text-decoration: none;
}

/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
    /*鼠标经过时，由原来的灰色变为天蓝色,并且有下划线*/
    color: skyblue;
    text-decoration: underline;
}

:focus 伪类选择器

用于选取获得焦点的表单元素

焦点就是光标，一般情况下类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

/*页面存在多个表单元素，鼠标点击哪一个表单元素，则该表单元素更改样式*/
/*鼠标移走，则恢复原来的样式*/
input:focus {
    background-color: blue;
    color: red;
}

<input type="text">
<input type="text">
<input type="text">