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

2018-06-27 09:08:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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;}

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

eg:

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

(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:"*";}

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

  li:before{content:*;}

 

也可以插入其他内容:

eg:

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

 

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

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

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

3.结构性伪类选择器——允许开发者根据文档树中的结构来指定元素的样式。

(1)root选择器:将样式绑定到页面的根元素中。在HTML中页面中指的是整个页面的“<html>”部分。

eg:

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

注意:

1 body{background: yellow;}

如果仅仅是定义body的背景颜色,而不定义:root,则整个页面都会变成黄色。

(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>

注意:not选择器的使用格式,:not(h1),不能写成not(“h1”),不然会出现错误。

(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;}

(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         }

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Bootstrap 快速人门案例——前端最火的插件

下一篇:CSS编程框架 - SASS之旅