css选择器和css特性

css选择器

1. 核心选择器

• id选择器

  利用了html元素的id属性，唯一

  一个标签上只能有一个id选择器

  一个id选择器只能选中一个标签

   #one {}    选中id为one的元素
  

• class选择器

  利用html元素的class属性，非唯一；

  类名可以由数字，字母和下划线，中划线组成，不能以数字或者中划线开头；

  一个标签可以同时有多个类名，类名之间以空格隔开；

   <div class="red big"></div>
  

  一个类选择器可以同时选中多个标签

   .box {}    选中class为box的元素
  

• 标签选择器

  利用标签名进行选择
  div {} 选中所有的div元素

• 通配符选择器

  *{ } 选中页面所有标签 ，标签默认样式，一般用于清除标签的默认margin和padding
  

• 并且选择器

  div.box {} 选中div元素，并且这个div的class为box

• 和选择器

  div,.box{} 选中div元素和class为box的元素

• 普遍选择器

  选中所有元素 *{ }

2. 层次选择器( 两个选择器配合使用)

• 子选择器

  通过父元素选择子元素
  >

   .menu > li {} 
  

• 后代选择器

  空格

   .menu li {}
  
   <ul class="menu">
     <li></li>
     <li>
       <ul>
         <li></li>
         <li></li>
       </ul>
     </li>
   </ul>
  

• 兄弟选择器

  符号 ~ : 当前元素之后的所有兄弟

   ul.rank > li:nth-child(2) ~ *{}  /*第二个li之后的所有li*/
  

  符号 + : 当前元素之后的下一个兄弟

   ul.rank > li:nth-child(2) + *{}  /*第三个li */
  

3. 属性选择器(属性过滤器)，一般应用在表单元素

• input[name] : 具有name属性input元素

• input[name=‘username’] : 具有name属性，并且name属性值为username的input元素

• input[name^=‘u’] : 具有name属性，并且name属性值以’u’作为开始

• input[name*=‘u’] : 具有name属性，并且name属性值包含’u’

• input[name$=‘u’] : 具有name属性，并且name属性值以’u’作为结尾

4. 伪类选择器(伪类过滤器)

• :first-child: 第一个孩子
• :last-child：最后一个孩子
• :nth-child(n)： 第n个孩子阶段
  :nth-child(even) 偶数
  :nth-child(odd)奇数
  :nth-child(2n)偶数
  :nth-child(2n+1)奇数
  :nth-child(n+5)第五个元素后
  :nth-child(-n+5)前五个元素
• ：nth-of-type(n) 只在父元素的同类型子元素范围中，匹配第n个
• : link: 未访问过
• :visited ：访问过的
• :hover ： 光标悬浮上去
• a:active ： 鼠标按下状态
• :focus ： 聚焦

链接伪类选择器：a:link; a:visited; a:hover; a:active;
同时使用这四种选择器时需要按照link-visited-hover-active的顺序来写，否则可能会导致某种选择器失效
：hover 常用于其他各类元素的悬停状态

焦点伪类选择器：:focus 用于元素获取焦点时的状态，常用于表单控件
表单控件获取焦点时会额外显示外部轮廓线

5. 伪元素选择器

• ::after 在元素内部的后面插入内容

   ul.menu::after {      /*在class为menu的ul元素中的后面追加一个子元素 */
   content:" ";  /*必须存在*/
   }    
   
   <ul class="menu">
     <li>one</li>
     <li>two</li>
     ::after
   </ul>
  

• ::before 在元素内部的前面插入内容

  ul.menu::before {    /* 在class为menu的ul元素中的最前面插入一个子元素 */
  content:" ";  /*必须存在*/
    }
  
   <ul class="menu">
     ::before
     <li>one</li>
     <li>two</li>
   </ul>
  

css三大特性

1.层叠性

当样式发生冲突时，只有当选择器优先级相同时，才用通过层叠性来判断结果：
给同一个标签设定不同的样式，样式会层层叠加，最后一起作用于标签；
给同一个标签设定同样的样式，样式会层层覆盖，写在最后的样式会生效

2.继承性

子标签可以继承父标签的样式

注：继承失效的特殊情况
元素有浏览器的默认样式，继承会失效，优先显示浏览器默认样式，需要单独为元素设置属性样式

a标签的color属性会继承失效；
h系列标签的font-size属性会继承失效；
div标签的高度不能继承父元素，但是宽度默认显示父元素宽度。

当标签的某个相同样式都是通过继承得来的，则通过判断这个标签的父元素的选择器优先级来判断该标签的样式

3.计算选择器优先级

当多个选择器中的相同规则作用于同一个元素的时候，我们纠结到底这个元素上使用哪个规则的时候。

1. 权重（积分）

   1000 style（行内样式）
   100 id选择器
   10 class、伪类选择器
   1 元素选择器、伪元素选择器
   0 继承

   权重可以叠加，但是不可以进位

   ul.menu > li.menu_item > ul.sub_menu > li {
   color: lightcyan;     /* 1+10 + 1 + 10 + 1+ 10 + 1= 34 */
   }
    
   #introduce {
   color:lightcoral    /*100*/
   }
   
   .si {
   color: gray !important;
   }
   

2. 顺序（排名）

   当权重值相同的情况下，后者覆盖前者

3. 特权（!important）
   脱离了权重和顺序规则
   但是！important 不能提升继承的优先级（最低）