css中常用的选择器

最新推荐文章于 2024-03-09 13:40:17 发布

_阿锋丶

最新推荐文章于 2024-03-09 13:40:17 发布

阅读量108

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_43342105/article/details/92430254

版权

html css 专栏收录该内容

29 篇文章 18 订阅

订阅专栏

<!DOCTYPE html>
<!-- 常用的选择器 -->
<html lang="en">
<head>
    <style type="text/css">
    p{
        color:red;
    }
   /* 为第2个p元素设置字体 */
   /* 
   id选择器
   通过元素的id属性选中唯一一个元素

    */
   #p1{
       font-size:20px;
   }
/* class选择器 */
/* 类选择器
-通过元素class属性中的一组
 元素
 -语法：
 .class属性值{}*/
   .p2{
       font-size:30px;
   }
    .hello{
        font-size:40px;
    }
    #p1,.p2{
        background-color: green;
    }

    /* 选择器分组
    通过选择器分组可以同时选中躲个选择器对
    应的元素
    -语法： 选择器1，选择器2，选择器n{} */

    /* 
    通配选择器
    -他可以用来选中页面中的所有元素
    语法：
        *{}
     */

     /* 复合选择器（ 交集选择器)*/
     /* 
       作用：可以同时满足多个选择器的元素
       语法： 选择器1选择器2选择器器3{}
     
      */

    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>南京</h1>
    <p>李逼没弟弟</p>
    <p id=p1>李逼没弟弟</p>
    <!-- 我们可以设置class属性和id类似，但是可以
    重复，拥有相同class值的
    可以同时为以个元素设置多个class属性值，多个值之间用
    空格隔开
    -->
    <p class=p2 hello>李逼没弟弟</p>
    <p class=p2>李逼没弟弟</p>
</body>
</html>