HTML笔记（3）

最新推荐文章于 2024-09-10 14:15:01 发布

shubmedea

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量48

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/shubmedea/article/details/127448336

版权

本文介绍了HTML中的emmet语法、自增符号以及各种选择器的用法，包括后代选择器、子元素选择器和并集选择器。通过示例展示了如何使用这些选择器来设置元素的样式，如颜色等。同时，还详细讲解了CSS中的伪类选择器，包括link、visited、hover和active状态，帮助读者掌握链接样式的控制。

摘要由CSDN通过智能技术生成

emmmet语法

$自增符号

div{DASDADA}*5 标签里面默认显示几个文字

后代选择器（包含选择器）

元素1 元素2 {样式声明}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LLLL</title>
    <STYLE>
        ol li {
            color: green;
        }
    </STYLE>
</head>
<body>
   <ol>
       <li>1111</li>
   </ol>
    <ul>
        <li>11111</li>
        <li>11111</li>
    </ul>
</body>
</html>

子元素选择器

元素1 > 元素2{样式声明}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LLLL</title>
    <STYLE>
    div>a {
        color: #4a78c2;
    }
    </STYLE>
</head>
<body>
  <div>
      <a href="#"> 哇哇哇哇哇</a>
      <p>
          <a href="#"> 我是1111</a>
      </p>
  </div>
</body>
</html>

并集选择器

元素1，元素2{样式声明}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LLLL</title>
    <style>
        div,
        p , 
        .sa li {
            color: #4a78c2;
        }
    </style>
</head>
<body>
  <div>
      年轻人
  </div>
<p>
    撒大苏打
</p>
<ul class="sa">
    <li>31231231</li>
    <li>31321</li>
    <li>31231</li>
</ul>
</body>
</html>

伪类选择器

link 未访问的链接

visited 已访问过的

hover 还没按下去的

actvie 按下去没有弹起的

a:link {
    color: black;
    text-decoration: none;
}
a:visited{
    color: darkgray;
}
a:hover {
    color: blue;
}
a:active {
    color: green;
}

shubmedea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫