H5与CS3权威下.19 选择器(2)结构性伪类选择器

发表在 H5移动开发工程师 1 个月前  来自 博客园 0 30

1.CSS中的伪类选择器及伪元素
  (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器。
    eg:a:link{color:#ff0000;}
  (2)伪元素的使用方法:
  选择器:伪元素{属性:值}
  选择器.类名:伪元素{属性:值}
2.css中常用的伪元素选择器
(1)first-line:向某元素中的第一行文字使用样式。
eg:

1 <p>伪元素选择器 <br>类选择器</p>  
1 p:first-line{background: pink;}  

H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

(2)first-letter:用于向某个元素中的文字的首字母(欧美文字)或是第一个字(中文或是日文等汉字)使用样式。
eg:

1 <p>伪元素选择器 ,类选择器</p>
2     <p>Hello!</p>  
1 p:first-letter{font-size: 20px;color:red;}  

H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

(3)before:用于在某个元素之前插入一些内容。
eg:

1 <ul>
2         <li>linshuling</li>
3         <li>linshuling</li>
4         <li>linshuling</li>
5         <li>linshuling</li>
6         <li>linshuling</li>
7     </ul>  
1 ul{list-style: none;}
2         li:before{content:"*";}  

H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

注意:如果content后面的内容不加双引号,会出现错误。(Firefox版本为50.1.0)

li:before{content:*;}
H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

也可以插入其他内容:
eg:

1 li:before{content:url(01.jpg);}  

(4)after:用于在某个元素之后插入一些内容。

1 ul{list-style: none;}
2         li:after{content:url(01.jpg);}  

H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

1 li:after{content:"0000";}  

H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

3.结构性伪类选择器——允许开发者根据文档树中的结构来指定元素的样式。
(1)root选择器:将样式绑定到页面的根元素中。在HTML中页面中指的是整个页面的“<html>”部分。
eg:

1 :root{background: pink;}
2         body{background: yellow;}  

H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

注意:

1 body{background: yellow;}  

如果仅仅是定义body的背景颜色,而不定义:root,则整个页面都会变成黄色。
H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

(2)not选择器:对某个结构元素使用样式,但是想排除这个结构下面的子结构元素,让它不使用这个样式,可以使用not选择器。
eg:

1 body :not(h1){color:red;font-size: 16px;}  
1 <h1>hello!</h1>
2     <ul>
3         <li>linshuling</li>
4         <li>linshuling</li>
5         <li>linshuling</li>
6         <li>linshuling</li>
7         <li>linshuling</li>
8     </ul>  

H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

注意:not选择器的使用格式,:not(h1),不能写成not(“h1”),不然会出现错误。
H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

(3)empty选择器:用来指定当元素中的内容为空白时使用的样式。
eg:

1 <h1>hello!</h1>
2     <ul>
3         <li>linshuling</li>
4         <li>linshuling</li>
5         <li></li>
6         <li>linshuling</li>
7         <li>linshuling</li>
8     </ul>  
1 :empty{background: pink;}  

H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

(4)target选择器:用来对页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。
eg:

 1 <a href="#text1">实例文字1</a>
 2     <a href="#text2">实例文字2</a>
 3 
 4     <div id="text1">
 5         <h2>linshuling</h2>
 6     </div>
 7 
 8     <div id="text2">
 9         <h2>linshuling</h2>
10     </div>  
1 :target{
2             background: pink;
3         }  

H5与CS3权威下.19 选择器(2)结构性伪类选择器-乐橙谷

如上的例子,点击“实例文字2”时,第二行的背景颜色会变为粉红色。点击“实例文字1”,第一行的背景颜色会变为粉红色。
乐橙谷

回复

微信扫码登录手机号登录×