css选择器伪类伪元素.docx

css选择器伪类 伪元素Css选择器 选择器分类 通配选择器： Css2.0引入的新的选择器。该选择器可以和任何元素匹配。例如重置页面中所有元素的内外边距就可以这样写： *margin:0;padding:0; 标签选择器 即直接使用html中的标签名做为选择器。使用后，文档中的该元素将会被应用相应样式。如： pcolor：#f00; /文档中的段落元素的文字颜色被定义为红色 类选择器 类选择器允许以一种独立于文档元素的方式来设置样式。它们可以单独使用。使用标签选择器后，文档中所有的标签都会被应用相同的样式，如果想给某个元素定义单独的样式，就可以使用类选择器了。基本语法是点号加类名。例如在css中定义了如下样式： pcolor:#f00; .stylecolor:#0f0 那么文档中的所有除class属性为style的p标签的文字颜色为红色，而class属性为style的段落的颜色为绿色。 类选择器可以分为常规类选择器和一般类选择器。常规类选择器就是用点号把标签和类名用点号连接。常规类只能用于点号前面的事先指定的标签。 一般类选择器与常规类选择器在书写形式上的区别仅仅在于前面没有指定标签，这类选择器可以被文档中的所有元素引用。可以说类选择器是使用频率最高的选择器。 ID选择器 ID选择器和类选择器很类似，只是把点号改为#就可以定义一个id选择器。与类选择器不同的是。Id选择器具有唯一性。元素的id属性更多时候是在为脚本提供服务。 简单属性选择 如果选择有某个属性的元素，可以使用一个简单的属性选择器。例如。要给含有class属性的所有p标签一个红色背景的代码如下： Pclass background:#f00; 根据具体的属性值选择 同属性选择器一样。指定具体的属性值，可在更小的范围内进行选择。 跟据部分属性值选择 如果一个属性的值可以是一组词列表，那么改选择器可以根据其中的任意一个词进行选择。代码如下： p class="style1"color：#f00; /class的值包含词组style1的所有p元素 特定属性选择 该选择器可以根据属性的值进行特定选择。规则是：属性值等于给出的字符串或值以该字符串开头的时候将被选中。例如： pclass|="st"color:#f00; /选择class属性值为st或以st开头的所有p标签 使用文档结构 Html文档存在层次关系，元素之间存在父子关系。Css之所以强大正因为如此。 后代选择器 理解文档结构后，就可以定义后代选择器了。有如下代码： div#header pcolor:#f00; 此规则定义的是id名为header下的所有p标签的文本颜色为红色。可以看到，后代选择器的语法为：子元素的标签名跟在父元素的标签名之后，中间用空格隔开。可以有多层嵌套。例如。选择id为header下的类名为list下的p可以写成：#header .list p 选择子元素 在某些情况下并不想选择所有的后代元素而只想选择其儿子元素。那么可以使用以下规则： #header > pcolor:#f00; 该规则定义的是包含于id为header元素内的p标签 选择相邻兄弟元素 使用加号连接符可以选择相邻兄弟元素。例如一个div里含有一个p标签和一个a标签。那么有如下样式： P+atext-decoration:none; 该规则将去除紧跟在p后面的a的下划线。 伪类和为元素 链接伪类 a:link 指示未访问过的链接的样式 a:active 指示鼠标按下时链接的样式 a:hover 指示鼠标移动到链接上时的样式 a:visited 指示已访问过的链接的样式 W3c标准定义这四个伪类的顺序为： a:link -> a:visited -> a:hover -> a:active 记忆方法：love -> hate 动态伪类 :focus 指示当前拥有输入焦点的元素 选择第一个元素 #header p:first-child 选择header中第一个段落 首字母选择 p:first-letter 选择段落的第一个字母 p:first-line 选择段落的第一行 注意： 这两个伪类只能作用于标记或段落之类的块级元素，而不能应用于超链接等行内元素。且在属性方面也有一定限制，这里就不一一列出了。 :before和:after 这两个伪元素用于插入生成内容并设置其样式。按字面意思。：before用于在元素内容的前面插入内容，：after反之。它们需配合content一起使用。用after来清除浮动是个不错的选择。 语法：ahref:beforecontent:"link" /在带href属性的超链接前面插入字符串：link 注意：插入的内容是在该元素的内容的前面或后面，也就是说是在其内部插入。而不是在该元素前面或紧跟其后。 选择器分组 如果希望文档中的多个元素使用相同的样式，最简单的办法就是使用选择器分组。例如： h2，p，color：#f00； /所有h2和p元素的字体颜色将被设置为红色 .style1,.style2color:#0f0; /引用了style1和styl2的元素的文本颜色都会变为绿色 说明：将相应的选择器放到规则的左边并每隔选择器之间用逗号分隔。这样，右边的样式将会被应用到出现在左边的选择器所对应的元素。如果逗号被省略，该规则含义将完全不同，相关内容请往下看。 不仅多个选择器可以有相同的样式应用到不同的标签，而且同一个标签也可以同时引用多个类。也就是说，一个class的值可以是一组词列表，各个词之间用空格隔开。例如： .style1color:#f00; .style2font-size:16px; <p class="class=style1 style2">这是个段落</p> 那么，这个段落的文字呈现为16px大小的红色字。