css样式之选择器的使用

最新推荐文章于 2024-07-06 14:50:23 发布

qq_42786725

最新推荐文章于 2024-07-06 14:50:23 发布

阅读量130

点赞数

文章标签： cs 选择

本文链接：https://blog.csdn.net/qq_42786725/article/details/81221179

版权

1.元素选择器

样式：

<style>

p{属性：属性值； }

li{ }

</style>

2.id选择器

# ID 名称{ 属性：属性值；属性：属性值；}

3.类选择器

点+类名{ 属性：属性值；}

style{

.add{ color:red;}

}

4.后代选择器/子代选择器

# first li { color:red;} （范围大） #first>li{color:red}（范围小）

</ul>

5.并集选择器

# a1,#a2,#a3{color:red;}

6.通用选择器（对页面所有元素适用）

*{ /* 通配符选择器 匹配当前页面所有元素*/
    margin: 0;
    padding: 0;

}

7.伪类选择器（解决顺序问题）

li:first-child{
    color:darkred;
}
li:last-child{
    color: chartreuse;
}
li:nth-child(2){/*第n=2个子元素*/
    color: peru;
}

td:hover{
    background-color: darkred;
}/*鼠标经过，变色*/

例子

<style>
        /*用 冒号 ： 使用伪类选择器*/
        li:first-child{
            color:darkred;
        }
        li:last-child{
            color: chartreuse;
        }
        li:nth-child(2){/*第n个子元素*/
            color: peru;
        }


    </style>
</head>
<body>
<ul>
    <li>烟台大学</li>
    <li>鲁东大学</li>
    <li>工商学院</li>
    <li>文经学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
    <li>全程学院</li>
</ul>
</body>

qq_42786725

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式之选择器的使用

1.元素选择器样式：&lt;style&gt;p{属性：属性值； }li{ }&lt;/style&gt;2.id选择器# ID 名称{ 属性：属性值；属性：属性值；}3.类选择器点+类名{ 属性：属性值；}style{.add{ color:red;}}&lt;p class="ad"&gt; 你好&lt;/p&gt;4.后代选择器...
复制链接

扫一扫