css基础精华03

最新推荐文章于 2022-04-12 20:50:42 发布

zhaihaohao1

最新推荐文章于 2022-04-12 20:50:42 发布

阅读量382

点赞数

分类专栏： css基础精华

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47815613

版权

css基础精华专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--CSS选择器-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css03.css" type="text/css" rel="stylesheet">
</head>
<body>
  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
  <a class="aclass">我是a标签</a>
  <div>
      <p>zhonghuo<i>我是雷锋</i>fhdlsfkh</p>
  </div>
  <p title="title">hell022222</p>
  <p title="ti">hell022222</p>
  <p title="title">hell022222</p>
  <p title="title hello">hell022222</p>
</body>
</html>
css:
/*最基本的有三种*/
/*1元素选择器    p{}*/
/*2class选择器  .p{}*/
/*3id选择器     #p{}*/

/*选择器分组*/
h1,h2,h3{
    color: brown;
}

/*结合元素选择器*/
/*a标签class是div*/
a.aclass{
    color: blueviolet;
}

/*后代选择器*/
/*也可直接写成：div i*/
/*用元素方式写*/
div p i{
    color: chartreuse;
    font-size: 50px;
}

/*id方式写*/
/*
#div #p #i{
    font-size: 60px;
    color: #b3d4fc;
}
*/

/*class方式写*/
/*
.div .p .i{
    font-size: 60px;
    color: #b3d4fc;
}
*/

/*子元素选择器*/
/*不能写成div>i*/
div>p>i{
    color: chartreuse;
    font-size: 50px;
}

/*属性选择器，模糊匹配*/
[title~="title"]{
    font-size: 60px;
}