CSS之复合选择器与伪类选择器
Posted qq_46655061
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS之复合选择器与伪类选择器相关的知识，希望对你有一定的参考价值。
CSS之复合选择器
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CSS符合选择器</title>
<style>
/*我想把ol里面的小li选择出来改为pink色*/
/*并级选择器用逗号隔开，一般会竖着写，一定要注意最后一个选择器不需要加逗号*/
ol li
color: pink;
.nav>a
color: red;
</style>
</head>
<body>
<!--后代选择器-->
<ol>
<li>我是ol的孩子</li>
</ol>
<ul>
<li>我是ul的孩子</li>
</ul>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
</html>
html之伪类选择器：作用是获得鼠标焦点触发样式变化
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CSS伪类选择器</title>
<style>
/*按照lvha的方式书写*/
/*把访问的链接选出来*/
/*要想给a修改样式，需要单独给a提出来给样式*/
a:link
text-decoration: none;
color: red;
/*a:visited选择未访问过得链接*/
/* a:visited
color: orange;
*/
/*a:hover选择鼠标经过的链接
a:hover
color: skyblue;
a:active
color: green;
*/
/*平时开发时使用经过点击变色加下划线*/
a:link
color: #333;
text-decoration:none;
a:hover
color: skyblue;
text-decoration: underline;
/*把获得光标的input表单元素选取出来*/
input:focus
background-color: skyblue; /*修改背景颜色*/
color: red; /*修改字体颜色*/
</style>
</head>
<body>
<!--伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第N个元素-->
<!--伪类选择器书写的最大特点是用冒号(:)表示，比如:first-child-->
<!--链接伪类，结构伪类，-->
<a href="http://www.baidu.com">未访问过的链接</a>
<br />
<input type="text"/>
<input type="text" />
<input type="text" />
</body>
</html>
以上是关于CSS之复合选择器与伪类选择器的主要内容，如果未能解决你的问题，请参考以下文章