爱站程序员基地 一、HTML标签的id和class属性和HTML标签的关系•id属性值和HTML标签的关系：就像身份证号码和我们之间的关系差不多，具有唯一性，也就是说在同一个页面中相同的id只能出现一次。•class属性值和HTML标签的关系：就像名字和我们之间的关系差不多，属性不具有唯一性，我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class的元素具有相同的CSS样式。•id就像你的身份证号，而class就像你的名字，但是都能通过他们来联系到你。 二、选择器•选择器（selector）：声明网页上的哪些标签元素是我们选中的。具体的选择器有很多种：1、元素选择器•元素选择器，就是“选中”相同的元素，然后对相同的元素定义同一组CSS样式。•语法：标签名{ 属性1 : 取值1; …… 属性n : 取值n;}比如p则会选中页面中的所有p标签。 2、id选择器【单选，唯一的】•我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。
3、class选择器【多选】•class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。
4.复合选择器• 复合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。（1）交集选择器【交】• 语法：选择器1.选择器2 { }作用：选中同时复合多个条件的元素• 例如div.box1会选中页面中具有box1这个class的div元素。div.cv { color：red }
（2）选择器分组（群组选择器）【并】选择器1，选择器2，选择器3 { }作用：同时选择多个选择器对应的元素 •群组选择器，指的是同时对几个选择器进行相同的操作。 5.通用选择器• 通用选择器，可以同时选中页面中的所有元素。• 语法：*{ } 6、后代元素和子元素选择器•HTML族谱
标签之间的关系• 祖先元素– 直接或间接包含后代元素的元素。• 后代元素– 直接或间接被祖先元素包含的元素。• 父元素– 直接包含子元素的元素。• 子元素– 直接被父元素包含的元素。• 兄弟元素– 拥有相同父元素的元素 •后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素（如“孙元素”）。• 语法：祖先元素 后代元素 后代元素 { }如果取的是id的话，如p1，p2，div2要在前面加#• 比如p strong 会选中页面中所有的p元素内的strong元素。 •子元素选择器，就是选择元素内部中所有的某一种元素，包括子元素，不包括其他后代元素（如“孙元素”）。• 语法：父元素 > 子元素 { }• 比如p > strong 会选中页面中所有的p元素内的儿子strong元素，只限制在儿子这一代。 7、兄弟元素选择器语法:– 查找后边一个兄弟元素• 兄弟元素 + 兄弟元素 { }– 查找后边所有的兄弟元素• 兄弟元素 ~ 兄弟元素 { } 三、选择器的优先级
- 我们为一个元素设置的样式同时也会应用到它的后代元素上
- 继承是发生在祖先后代之间的
- 继承的设计是为了方便我们的开发：利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式
- 注意：并不是所有的样式都会被继承：比如背景相关的，布局相关等的这些样式都不会被继承。
不同级别
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式【内联样式】
- id选择器
- 类和伪类选择器
- 元素选择器
- 通配符选择器
- 浏览器自定义或继承
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）, 选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器，如果优先级计算后相同，此时则优先使用靠下的样式。可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式。
总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性同一级别(1) 同一级别中后写的会覆盖先写的样式(2) 同一级别css引入方式不同，优先级不同总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。 CSS3补充内容
8.属性选择器
- [属性名] 选择含有指定属性的元素
- [属性名=属性值] 选择含有指定属性和属性值的元素
- [属性名^=属性值] 选择属性值以指定值开头的元素
- [属性名$=属性值] 选择属性值以指定值结尾的元素
- [属性名*=属性值] 选择属性值中含有某值的元素的元素
[code]<style>/* p[title]{ *//* p[title=abc]{ *//* p[title^=abc]{ *//* p[title$=abc]{ */p[title*=e]{color: orange;}</style></head><body><p title=\"abc\">少小离家老大回</p><p title=\"abcdef\">乡音无改鬓毛衰</p><p title=\"helloabc\">儿童相见不相识</p><p>笑问客从何处来</p><p>秋水共长天一色</p><p>落霞与孤鹜齐飞</p></body></html>
9.伪类选择器
- 伪类（不存在的类，特殊的类）：伪类用来描述一个元素的特殊状态。比如：第一个子元素、被点击的元素、鼠标移入的元素…
- 伪类一般情况下都是使用:开头
:first-child 第一个子元素:last-child 最后一个子元素:nth-child() 选中第n个子元素:only-child特殊值：n 第n个 n的范围0到正无穷2n 或 even 表示选中偶数位的元素2n+1 或 odd 表示选中奇数位的元素- 以上这些伪类都是根据所有的子元素进行排序 :first-of-type:last-of-type:nth-of-type():only-of-type:empty- 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序 :not() 否定伪类- 将符合条件的元素从选择器中去除 10.a元素的伪类a是超链接标签
[code]<style>/*:link 用来表示没访问过的链接（正常的链接）*/a:link{color: red;}/*:visited 用来表示访问过的链接由于隐私的原因，所以visited这个伪类只能修改链接的颜色*/a:visited{color: orange;/* font-size: 50px; */}/*:hover 用来表示鼠标移入的状态*/a:hover{color: aqua;font-size: 50px;}/*:active 用来表示鼠标点击*/a:active{color: yellowgreen;}p:first-child{color: red;}</style>
11.伪元素选择器
- 伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
- 伪元素使用 :: 开头
[code]<style>p{font-size: 20px;}/*::first-letter 表示第一个字母::first-line 表示第一行::selection 表示选中的内容::before 元素的开始::after 元素的最后- before 和 after 必须结合content属性来使用*/p::first-letter{font-size: 50px;}p::first-line{background-color: yellow;}p::selection{background-color: greenyellow;}div::before{content: \'abc\';color: red;}div::after{content: \'haha\';color: blue;}div::before{content: \'『\';}div::after{content: \'』\';}</style>
CSS餐厅练习： http://flukeout.github.io/#
