2018-05-14
H5原生与OC交互第二次课-CSS

常见选择器

标签选择器

div{
}

类选择器

.high {
}
.low {
}

<p class="high"></p>
<p class="low"></p>
<p class="high low"></p>

id选择器

#first {
}
<p id="first"></p>

注：一个id按要求只能标记一个元素。

并列选择器

div, .high {
}

<p class="high"></p>
<div></div>

注：“或”的关系

复合选择器

div.high {
}

<p class="high"></p>
<div></div>

注：“与”的关系，“div”与“high ”之间不能加空格。

后代选择器

div p {
}

<div>
  <p></p>
  <span>
     <p></p>
  </span>
</div>

注：div下面的p和span里面的p都会被选中。

直接后代选择器

div > p {
}

<div>
  <p></p>
  <span>
     <p></p>
  </span>
</div>

注：div下面的p会被选中，span里面的p不会被选中。

相邻兄弟选择器

div + p {
}
<p>div相邻上面的p</p>
<div>
    <p></p>
    <span>
       <p></p>
    </span>
</div>
<p>div相邻下面的p</p>
<p>与p相邻的p</p>

注：“div相邻下面的p”会被选中

属性选择器

div[name] {
}
div[name][age] {
}
div[name="jack"] {
}

<div name="jack" age="20" ></div>

伪类

我的理解：顾名思义不是真正的存在的标签，而是现有的标签处在某种状态的标签。
详情

伪元素

我的理解：现有元素（被“冒号”前面的选择器选中的）的一部分。
详情

选择器的优先级

类型	通配符	标签	类	属性	伪类	伪元素	id	important	内联
权	0	1	10	10	10	10	100	1000	小于important

总结

原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先。
我的总结：越具体的优先级越高，同级别的就近原则（CSS代码和被选择的元素的距离），叠加原则（高级别的选择器对应的样式未设置元素的某个属性）。