css3选择器使用时注意哪些问题,css3新增了哪三种属性选择器

CSS选择器与优先级详解（一）

CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。

1.基础选择器

a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。

HTML

CSS

执行效果：

b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。

HTML

CSS

执行效果：

c.元素选择器：通过note节点名称匹配元素。

HTML

CSS

2.属性选择器：

注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。

CSS3新增了一些属性选择器，待持续更新。

3.组合选择器

示例如下：

实现效果如下：

示例如下：

从高到低依次是：

1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素标签上的内联样式

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器自定义

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

参考：

1. css优先级计算规则

2. CSS选择器笔记

3. Selectors MDN

4. CSS3 选择器——基本选择器

5. CSS3 选择器——伪类选择器

6. 征服高级CSS选择器

关于css3的属性选择器的理解

F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E

F）不一样，在后代选择器中F是E的后代元素，而子元素选择器E ,所起作用就是可以选择某元素的后代元素，比如说:E

F，前面E为祖先元素，而且F元素在E元素后面，，也可以选择某个元素下的所有元素。

二、元素选择器(E)

元素选择器，是css选择器中最常见而且最基本的选择器，不同的是ID选择器是一个页面中唯一的值，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素; F，其中F仅仅是E的子元素而以。

七、相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素，EF两元素具有一个相同的父元素，请注意他们之间需要一个空格隔开、子元素选择器(E，而且他们具有一个相同的父元素，换句话说，我们在类使用时是在相对应的类名前加上一个“css3选择器如下：

一、通配符选择器（＊）

通配符选择器是用来选择所有元素，而F为子元素，其中E.className）

类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名

四、id选择器（ID）

ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称;如(id),

五、后代选择器（E F）

后代选择器也被称作包含选择器，这样在样式选择器中才能找到相对应的元素.className）而id选择器是在名称前使用。

三.”号（、类选择器（，其中E为父元素;F)

子元素选择器只能选择某元素的子元素。

六，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素

css3选择器怎样选择元素？

代码如下：

li:nth-child(3n)

{

background:#ff0000;

}

CSS即层叠样式表(Cascading?StyleSheet)。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

CSS3选择器入门

元素选择器 作用：根据标签名来选中指定的元素 语法：标签名{} 例子：p{} h1{} p{}

作用：根据元素的id属性值选中一个元素 语法：#id属性值{} 例子：#box{} #red{}

类选择器 作用：根据元素的class属性值选中一组元素 语法：.class属性值

作用：选中页面中的所有元素 语法: *

作用：选中同时复合多个条件的元素 语法：选择器1选择器2选择器3选择器n{} 注意点： 交集选择器中如果有元素选择器，必须使用元素选择器开头

选择器分组（并集选择器） 作用：同时选择多个选择器对应的元素 语法：选择器1,选择器2,选择器3,选择器n{}

作用：选中指定父元素的指定子元素 语法：父元素 子元素

作用：选中指定元素内的指定后代元素 语法：祖先 后代

选择下一个兄弟 语法：前一个 + 下一个

选择下边所有的兄弟 语法：兄 ~ 弟

[属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值的元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名*=属性值] 选择属性值中含有某值的元素的元素

表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用 :: 开头

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

::before 元素的开始

::after 元素的最后

before 和 after 必须结合content属性来使用

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上

继承是发生在祖先后后代之间的

继承的设计是为了方便我们的开发， 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上， 这样只需设置一次即可让所有的元素都具有该样式

注意：并不是所有的样式都会被继承：比如 背景相关的，布局相关等的这些样式都不会被继承

选择器的权重

内联样式 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配选择器 0,0,0,0

继承的样式 没有优先级

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，

注意：在开发中这个玩意一定要慎用！