css选择器

css选择器

选择器具有以下几个要素:

1. 层叠性、在同一权重值之下同一元素的代码，后面的样式会覆盖前面的样式。
2. 继承性：给父元素设置样式时，子元素也会有相关的样式。
3. 优先级:比较权重值（！important>行内样式>id选择器（100）>class选择器(10)>标签选择器（1）
4. 取id或者class类名可以是英文数字下划线的组合，但是不可以用数字开头!
   通配符选择器：

*{
margin: 0; /* 给页面所有的元素加上这个样式，包括html*/
padding: 0;
}

元素选择器:

p span{ /* 选中页面中p里面的span元素*/
   color: red; 
}

class选择器(类选择器):

.box{ /* 选中class类名为box的元素。class选择器前面需要加.
      	class不是唯一的，一个页面中可以出现多个class*/
    color: red;
}

id选择器:

#ii{/*选中元素id值为ii的元素。id选择器前面需要加#号，id是唯一的，页面中不能出现相同的id。*/
    color:red;
}

相邻兄弟元素选择器:

h2+p{ /*选中h2元素后面紧挨的第一个p元素*/
    color: red; 
}

通用兄弟选择器：

h2~p{   /*选中h2元素后面所有的p元素*/
    color: red;
}

群组选择器:

div,p,span{  /*选中页面中所有的div、p、span元素*/
    color: red;
}

后代选择器:

ul>li>ul>li{ /*选择ul下为li的子元素，再选择ul下为li的子元素。如果直接用ul li选择会选择全部li。*/
    color: #FF0000;
}

结构伪类:

div :nth-child(2){ /*选中div下第二个子元素*/
    color: #FF0000;
}

nth-child(2n):

div :nth-child(2n){ /*选中div下2、4、6、8...的元素。如果为3n,则选中div下3、6、9...的元素，以此类推。*/
    color: #FF0000;
}

nth-child(n+3):

  div :nth-child(n+3){/*选中div下第三个子元素后面(包括第三个)的所有元素*/
    color: #FF0000;
}

first-of-type:

div p:last-of-type{ /*选中div里面最后一个p*/
    color: red;
}

*结束语:*差不多了，还有一些不常用的就不说了。分享一个小技巧吧(如果你知道了，当我没说），在你审查元素的时候，按Delete或者Backspace，可以删除该元素，但只是在当前页面上，刷新就可以恢复。我当时写一个响应式网页的时候就不知道怎么回事，整个html多出几十像素，死活找不到，但是用了这个排除法解决了。