（四）CSS伪类、伪元素、导航栏、图片廊、图片的不透明度、属性选择器

·······················我是分界线·····················

CSS伪类

CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法：selector:pseudo-class {property:value;}
CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}

anchor伪类

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。

CSS伪类可以和CSS类配合使用

a.red:visited {color:#FF0000;}
 <a class="red" href="css-syntax.html">CSS 语法</a>

使用焦点

input:focus
{
    background-color:yellow;
}
<body>
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname" /><br>
Last name: <input type="text" name="lname" /><br>
<input type="submit" value="提交" />
</form>

image.png

first-child 匹配p元素的第一个任何元素

p:first-child
{
    color:blue;
}

image.png

匹配所有p元素的第一个i元素

<style>
p > i:first-child
{
    color:blue;
} 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
![image.png](https://upload-images.jianshu.io/upload_images/20680810-05c7593625d778ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

匹配第一个p元素的所有i元素

<style>
p:first-child i
{
    color:blue;
} 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

image.png

CSS所有伪类、伪元素

image.png

CSS伪元素

first-line伪元素:设置文本的第一行样式

注意："first-line" 伪元素只能用于块级元素。
注意：下面的属性可应用于 "first-line" 伪元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}

image.png

：first-letter伪元素：设置文本的第一个首字母样式

注意： "first-letter" 伪元素只能用于块级元素。
注意：下面的属性可应用于 "first-letter" 伪元素：
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

image.png

多个伪元素

p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}
p:first-line 
{
    color:#0000ff;
    font-variant:small-caps;
}

image.png

before伪元素

可以在元素的内容前面插入新内容。

<style>
h1:before {content:url(smiley.gif);}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>

image.png

after伪元素

可以在元素的内容之后插入新内容。

<style>
h1:after {content:url(smiley.gif);}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>

image.png

CSS导航栏

垂直导航栏

<html>
<head>
<meta charset="utf-8"> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
a:link,a:visited
{
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>

image.png

水平导航栏

<html>
<head>
<meta charset="utf-8"> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li
{
    float:left;
}
a:link,a:visited
{
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color:#7A991A;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>

image.png

图片廊

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg">
      <img src="//static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
      <img src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo3.jpg">
      <img src="//static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
      <img src="//static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
</body>
</html>

image.png

改变图片的透明度

<style>
img
{
    opacity:0.4;
    filter:alpha(opacity=40); /* 适用 IE8 及其更早版本 */
}
img:hover
{
    opacity:1.0;
    filter:alpha(opacity=100); /* 适用 IE8 及其更早版本 */
}
</style>

image.png

创建一个背景图像和文本的透明框

<html>
<head>
<meta charset="utf-8"> 
<style>
div.background
{
  width: 500px;
  height: 250px;
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox
{
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>
这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</p>
</div>
</div>
</body>
</html>

image.png

悬停效果和图像拼合

<html>
<head>
<meta charset="utf-8">   
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

image.png

🌹（四）CSS所有属性总结（详细实例版）

🌹（四）CSS所有属性总结（详细实例版）

（四）CSS伪类、伪元素、导航栏、图片廊、图片的不透明度、属性选择器

CSS伪类

anchor伪类

CSS伪类可以和CSS类配合使用

使用焦点

first-child 匹配p元素的第一个任何元素

匹配所有p元素的第一个i元素

匹配第一个p元素的所有i元素

CSS所有伪类、伪元素

CSS伪元素

first-line伪元素:设置文本的第一行样式

：first-letter伪元素：设置文本的第一个首字母样式

多个伪元素

before伪元素

after伪元素

CSS导航栏

垂直导航栏

水平导航栏

图片廊

改变图片的透明度

创建一个背景图像和文本的透明框

悬停效果和图像拼合