css选择器 - 掘金

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

层叠性、在同一权重值之下同一元素的代码，后面的样式会覆盖前面的样式。
继承性：给父元素设置样式时，子元素也会有相关的样式。
优先级:比较权重值（！important>行内样式>id选择器（100）>class选择器(10)>标签选择器（1）
取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; 
}

{FDUOWV)4KUNY`D$(24LFNV.png

通用兄弟选择器：

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

L`Q38(RBXRR8@OIEGHMW7WO.png

群组选择器:

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

$1MHSE6Q_B@{MH@YH6XGTU6F.png$

后代选择器:

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

1BEVRULN_FE898IU$CTT6ZH.png

结构伪类:

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;
}

)6GUPLL1X4_V87$5P3T87`5.png

first-of-type

div p:first-of-type{ //选中div里面第一个p
    color: red;
}

last-of-type

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

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