前端基础_CSS选择器

1. 后代选择器(包含选择器)，选择子孙后代

2. .nav a{
   color: pink;
   }
   .wsc li{
   color: greenyellow;
   }

   	div strong{
   		color: red;
   		}
   		<div class="nav">
   	<a href="#">内部链接</a>
   	<a href="#">内部链接</a>
   	<a href="#">内部链接</a>
   </div>
   	<a href="#">内部链接</a>
   	<a href="#">内部链接</a>
   	<a href="#">内部链接</a>
   	<ul class="wsc">
   		<li>一条狗</li>
   		<li>一条狗</li>
   		<li>一条狗</li>
   	</ul>
   

3. 子元素选择器,只选亲儿子 这些元素

div > strong{
				color: green;
			}

<div>
			<strong>儿子</strong>
			<strong>儿子</strong>
			<strong>儿子</strong>
		</div>
		<div>
			<p>
			<strong>孙子</strong>
			<strong>孙子</strong>
			<strong>孙子</strong>
			</p>
		</div>

5. 交集选择器，既是又是

p.red{
				color: red;
			}

<p class="red">红色</p>
		<p class="red">红色</p>
		<p class="red">红色</p>
		<div class="red">红色</div>
		<div class="red">红色</div>
		<div class="red">红色</div>
		<p>蓝色</p>
		<p>蓝色</p>
		<p>蓝色</p>

4. 并集选择器（重点）:用 ， 隔开，理解为 和 的意思，通常用于集体声明

			p,
			span,
			.red {
				color:red;
			}
		<p>我和你</p>
		<p>我和你</p>
		<p>我和你</p>
		<span>我和你</span>
		<span>我和你</span>
		<span>我和你</span>
		<div class="red">我和你</div>
		<div>我和你</div>
		<div>我和你</div>
		<h1>我和你</h1>
		<h1>我和你</h1>
		< h1>我和你</h1>

测试题

.nav ul li a{
				color: orange;
				}
			.site-r a{
				color:red ;
				}
			.nav,
			.sitenav {
				font: 14px "微软雅黑"
			}
``<!-- 测试题 ： 主导航栏 -->
		 
		<div class="nav">
			<ul>
				<li><a href="#">公司首页</a></li>
				<li><a href="#">公司简介</a></li>
				<li><a href="#">公司产品</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</ div>
		
	
		<!-- 侧导航栏 -->
		
		 <div class="sitenav">
			<div class="site-l">左侧导航栏</div>
			<div class="site-r"><a href="#">登录</a>	
			</div>
		</div> 

5. 链接伪类选择器（重点）
   四个 a:link a:vistited a:hover a:active
   顺序 l v h a

 /* 未访问过的 */
			a:link{
				color: green;
				text-decoration: none;
			}
			/* 已经访问过的链接 */
			a:visited{
				color: orange;
			}
			/* 鼠标经过链接时的状态 */
			a:hover{
				color: red;
			}
			/* 点击时按住鼠标为松开时的状态 */
			a:active{
				color: black;
			}

<a href="http://www.xiaomi.com">小米手机</a>
		<a href="http://www.dami.com">大米手机</a>