css以及css3中的选择器

CSS中选择器的种类：

1、元素选择器：

通配符*{} ：通常用于去掉内外边距

p{}；h1{}；h1,h2{}之类的都是元素选择器

2、类选择器

.class{}

类选择器结合元素选择器 : 当有两个元素class名称相同时，如果我们只要单独改变一个，可以——元素.class名称{}，如a.classname{}

多类选择器：.class.class{}                  在thml文件中使用时，中间空格隔开，如

<p class="p1 p2">不用再<strong><span style="font-size:24px;">.</span></strong>class<strong><span style="font-size:24px;">.</span></strong>class{}中再去定义，但同时拥有p1&p2两种特效</p>

3、id选择器

#id{}

id选择器和类选择器的区别：

id只能在文档中使用一次，而类可以使用多次：也即是说id选择器的名字不能重复，但是class选择器，可以允许共用同一个class名字。

id选择器不能结合使用

当使用js的时候，需要用到id

4、属性选择器

[title]{}



其中4中部分属性值选择通过~实现，如下



5、后代选择器

后代选择器可以选择作为某元素后代的元素，通过空格使用。

<p><style></p><p><span style="white-space: pre;">	</span>p strong i{color：red}</p><p></style></p>

<p>this is my <strong>web <span style="font-family: Arial, Helvetica, sans-serif;"> <i>hello</i>  </span></strong> page</p>

6、子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素，通过>使用。他与后代选择器的不同我们还是通过上面的例子来说明。

如果我们要改变hello的颜色，后代选择器可以直接选择各种后代，子元素，孙子元素等等

<p><style></p><p><span>	</span>p i{color：red}</p><p></style></p>

但是子元素选择器必须一层一层的找，

<p><style></p><p><span>	</span>p>strong>i{color：red}</p><p></style></p>

7、相邻兄弟选择器

可以选择紧接在另一个元素后的元素，且二者有相同的父元素，用+实现。应用的并不多。li+li{color:red},是item2和item3有效果

<p><ul></p><p><span>	</span><li>item1</li></p><p><span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">        <li</span><span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">>item2</li></span>
</p><p><span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);"><span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">        <li</span><span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">>item3</li></span></span></p><p></ul></p>

CSS3中新增加的选择器：包含[att*=val]  ；  首字母[att^=val]  ；   结束字符[att$=val] 

注意：当输入数字时，前面要加一个“\”



CSS3结构性伪类选择器，包含伪类选择器和伪元素选择器，在伪元素选择器中包含first-line、first-letter、before、after



CSS3结构性伪类选择器：root、not、empty、target