CSS学习笔记 2.选择器.常用.复合.关系选择器

一、常用选择器
1.元素选择器（标签选择器）
使用HTML标签作为选择器的名称

p{
    color:green;font-size:20px;/* 1元素选择器 根据标签名来选中元素 */
   }/*  此为css内注释 */

2.id选择器
使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

 #LOL{
color:tomato;   /*  2id选择器  用法 #id(属性值){}    */
      }

<h2 id="LOL">英雄联盟</h2>

id命名不能重复只能选中单个元素 一对一
3.类选择器
根据元素的class属性值选中一种元素
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

.yx{
color:purple;/*   3 类选择器  用法.class(属性值){}   选中一组数据 可以重复能选中多个  开发常用
还可以给同一个元素 使用多个不同的class名 如 class="yx cx zx"之间用空格隔开*/
    }

<li class="yx"> 千场老剑魔教你如何玩 TheShy一打四天神下凡 </li>

class是一个标签的属性，和id类似 但他可以重复使用 还可以给同一个原色 使用不同的class名
4.通配选择器
选中页面中的所有元素

*{
color:red;/*  页面中所有元素都被选中且赋给红色  */
}

二、复和选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
1.交集选择器
选中同时符合多个条件的元素
用法 选择器1选择器2选择器3选择器n{}

div.music  {
  color:salmon;  /* 交集选择器 例子为既符合元素选择器div又符合class="music" 用法 选择器1选择器2选择器3选择器n{} 
     选中同时符合多个条件的元素  唯一对应的元素*/
}  

  <div class="music">  周杰伦 晴天  

2.并集选择器
用法 选择器1，选择器2，选择器3，选择器n{}
例如div，.music{} 表示有div标签和class=“music” 的元素都被选中
三、关系选择器
父元素
-直接包含子元素的元素叫做父元素子元素
-直接被父元素包含的元素是子元素
祖先元素
-直接或间接包含后代元素的元素叫做祖先元素-一个元素的父元素也是它的祖先元素
后代元素
-直接或间接被祖先元素包含的元素叫做后代元素-子元素也是后代元素
兄弟元素
-拥有相同父元素的元素是兄弟元素

<div class="box">//是p的父亲元素
我是一个div
<p>//
我是div中的p元素
<span>我是p元素中的span</span>//div是它的祖先元素  p是它的父亲元素
</p>
<span>我是div中的span元素</span>//是p的兄弟元素
</div>

1.子元素选择器
选中指定父元素的指定子元素
语法 父元素 >子元素

div>span{
color：red；
}

2.后代元素选择器
选中指定元素的指定后代元素
语法 祖先 后代

div span{
color：red；
}

3.兄弟元素选择器
选中指定元素的指定兄弟元素
语法 前一个+ 后一个

p+span{
color：red；
}