CSS选择符补充.docVIP

选择符补充 上下文选择符： 例：p em {color: green;} //中间用空格作为分隔符 又例：article em { color: green;} //article与em之间是否还隔着其他元素，都不 能影响结果，只要em在整个层次结构中有一 个叫article的祖先元素即可。 又例：article h1 em (color: green;) //选中的em必须有一个祖先是h1，后进而还 要有一个祖先是article。 特殊的上下文选择符 显示效果： 图1 子选择符 标签1 标签2 //标签2必须是标签1的子元素 例：section h2 {font-style: italic;} h2是section额子元素，故而被选中。 紧邻同胞选择符+ 标签1 + 标签2 //标签2必须紧跟在其同胞标签1的后面 例：h2 + p {font-variant:small-caps;} 第一个p由于是h2的紧邻同胞而被选中 一般同胞选择符~ 标签1~标签2 //标签2 必须跟（不一定紧跟）在同胞标签1后面 例：h2~a{color : red;} 只选中了同胞元素 通用选择符* * ——通用选择符匹配任何元素 例：*{color: green;} 又例：p * {color:red;} //这样只会把p包含的所有元素的文本变成红色。 这个选择符还有一个非常有意思的用法，即用它构成非子选择符，比如： section * a{font-size:1.3em;} //任何事section孙子元素，而非子元素的a标签都会被选中。至于a的父元素是什么，都没有关系。 继承和上下文选择符能让不同的标签共享样式，从而降低需要编写和维护的CSS量，所以不要过度的设置类。 ID与类 最顶级的区域可以使用ID来标记，它能够为我们编写CSS规则提供必要的上下文，排除无关的标记，而只选择该上下文中的标签； 类是可以应用给任意多个页面中的任意多个HTML元素的公共标示符，以便我们为这些元素应用相同的CSS样式。而且，使用类也让不同标签名的元素应用相同的样式称为可能。 属性选择符 伪类 伪 类 （一）UI伪类 链接伪类： a:link;(等待点击) a:visited;(曾点击过) a:hover; (悬停) a:active:(正在点击，未释放) 注意：由于这4个伪类的特指度相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期效果。 一般情况下，：link和：hover就足够了。但如果你有一个长长的目录链接，那么用稍浅一点颜色(例：gray，#eee)显示出那些已经访问过（即点击过）的链接，对用户会很有帮助。然而，修改导航条visited状态的颜色就没有意义了。 注意：有些伪类可以应用与任何元素， 例 p:hover{background-color:gray;}（2） :focus伪类 e:focus //其中的e代表任何元素 :focus ——表单中的文本字段在用户点击它时会获得焦点，然后用户才能在其中输入字符。下面的规则 input:focus{border:1px solid blue;} 会在光标位于input字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。 :target伪类 e:target //其中的e代表任何元素 如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用：target伪类选中它。 （二）结构化伪类 :first-child和 :last-child :first-child——代表一组同胞元素中的第一个元素； :last-child——代表一组同胞元素中的最后一个元素； :nth-child 例：e:nth-child(n) //（n表示一个数值）表示一组列表项中的每个第n项。 （三）伪元素 ：：first-letter 伪元素 ——首字符 例：p::first-letter{font-size:300%;} //实现段首字符放大效果 ：：first-letter 伪元素——首行 例：p::first-line{font-variant:small-caps;} //将第一行变成小型大写字母 ：：before和：：after伪元素 ——用于在特定元素前面或后面添加特殊内容 例：以下标记 p class=”age”25/p 和如下样式 p,age::before {content:”Age: ”;} p.age::after {content:” years.”;} 能得到以下结果