使用过的CSS元素整理——选择器

声明：收集的元素来自网上和w3school，仅用于自用笔记整理，如摘用其他博客信息，敬请见谅。

一、选择的顺序。

Tips：在css中有同名规则会产生覆盖，具体度越高，限定越精确的优先权越高。​

标签选择器；使用p{} ;

类名选择器 ;  使用 .name{};

id 选择器    ;  使用#id {};

1. 复合选择器

div,p     选择所有元素和所有元素。

2.层次选择器

divp     选择元素内部的所有元素。

3.多类选择器：

一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

This paragraph is a very important warning.

 

.important.warning{background:silver;}  ；

4.伪类选择器：

1）：hover:选择鼠标指针浮动在其上的元素，并设置其样式.

2）:focus ：选择获得焦点的input 元素。

提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。

<style type="text/css">

input:focus{background-color:yellow;}</style>

3）element>element​：

div>p   选择父元素为div元素的所有p元素。

注释：如果元素不是父元素的直接子元素，则不会被选择。​即只有第一层元素会被选择。

<style>
div>p
{
background-color:yellow;
}
</style>

<div><p>我是唐老鸭。</p>

          <p>我住在 Duckburg。</p>

</div>

<p>我最好的朋友是米老鼠。</p>

<div><span><p>我的样式不会改变。</p></span></div>

4）:before :after

p:before   p:after

在每个p元素的内容之前/之后插入内容。

5）:not(selector)

:not(p)      选择非p元素的每个元素。

li:not(p)   它表示不包括p元素的li元素..

6)and so on.