一、CSS基础选择器：

1.class 类选择器

类名可以重复
  1. .类名
  2. {
  4. }

2.id选择器

id是唯一的，不可以重复，只对一个标签修饰
  1. #id名
  2. {
  3. }

3.标签选择器

可以对一类标签使用设置css样式
  1.  标签名{样式1；样式2；........}

4.组合选择器

没有先后顺序之分,平级，用逗号隔开
  1. .c,h1,div{
  2.    width=100px;
  3. }

5.层级选择器（父子选择器）

空格隔开
  1. div p {
  2. color:red;
  3. }
  2. <div>
  3.   <p>
  4.   AA<span>BBB</span>
  6.   </p>
  8. </div>
  10. 可以跨级别修饰：
  11. div span{
  12. background-color:red;
  13. }

注意：（p标签中不能套div标签（段落标签））

6.伪类选择器

  1. h1:hover{
  2. color:red;
  3. border-bottom； 5px soild red;
  5. }
  7. 鼠标移动到该标签时会添加悬浮效果

7.选择器优先级

  1. 当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。
  3. 不同级别    
  5.     1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  7.     2、作为style属性写在元素内的样式    
  9.     3、id选择器    
  11.     4、类选择器    
  13.     5、标签选择器    
  15.     6、通配符选择器
  17.     7、浏览器自定义或继承
  19.     总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
  21. 同一级别中后写的会覆盖先写的样式。

二、关系选择器

1.属性选择器

  1. 标签名[att^=value]
  3. eg:
  4. p[id^="one"]{
  5. color:red;
  6. }
  7. 只要p元素中的id属性值是以“one”字符串开头就会被选中
  8. 从而实现相应的效果·

2.子代选择器（>）

主要用于选择某个元素的第一级子元素

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             h1>strong{
  8.                 color: red;
  9.             }
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <h1><strong>hello world！！！</strong></h1>
  14.         <h1><div><strong>hello world！！！</strong></div></h1>
  15.     </body>
  16. </html>

效果：image.png