html css学习笔记-派生选择器 id选择器类选择

最新推荐文章于 2022-05-05 23:02:46 发布

绿叶清风

最新推荐文章于 2022-05-05 23:02:46 发布

阅读量2.7k

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/PZ0605/article/details/45752099

版权

html/css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*<!--派生选择器-->*/
        li strong{
            color: red;;
        }
        /*已经定义过的strong不会爱到影响 ; 并不会影响了li在颜色*/
        strong{
            color:deeppink;
        }
        #textp{
            color: lightblue;
        }
        /*id与派生选择器同时使用*/
        #pid a{
            color: palegoldenrod;
        }
        .pclass{
            color: red;
        }
        /*类选择与派生选择器同时使用*/
        .pclass a{

        }
        /*属性选择器*/
        [title]{
            color: #FF0000;
        }
        /*属性与值选择器*/
        [title=te]{
            color: lightpink;
        }
        
    </style>
</head>
<body>
<!--
  css基本语法：
  selector{property:volue}
  如：h1{color:red}
  如果属性大于一个，属性之间用分号隔开;如果单个属性的值多于一个单词，属于用引号括起来
  -->
<!--
   1，选择器的分组：用逗号分开
   2,继承:如果自己定义了则引用自己的样式，如果自己没有定义，则引用父节点样式
-->
<!--
  派生选择器：通过依据元素在其位置的上下文关系来定义样式
-->
<p><strong>this is test p</strong></p>
<ul>
    <li><strong>li label</strong></li>
</ul>
<!--
  id选择器：#
  id选择器通常与派生选择器一起使用
-->
<div id="divid">
    这是第一个div
</div>
<p id="textp">text p</p>
<p id="pid">this is a <a href="">www.baidu.com</a></p>
<!--
  类选择：
  类选择与可用做派生选择器，也可与派生选择器结合使用
-->
<p class="pclass"> this is class with <a href="">baidu.com</a> </p>
<div class="divclass"> hello divclass...</div>

<!--
  属性选择器：对带有指定属性的html元素设置样式
  属性与值选择器：
-->
<p>属性选择器</p>
</body>
</html>

绿叶清风

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html css学习笔记-派生选择器 id选择器类选择

/**/ li strong{ color: red;; } /*已经定义过的strong不会爱到影响 ; 并不会影响了li在颜色*/ strong{ color:deeppink; } #textp{ color: lightbl
复制链接

扫一扫