简单学习CSS-选择器1

最新推荐文章于 2024-07-12 16:31:27 发布

愤怒的小油条

最新推荐文章于 2024-07-12 16:31:27 发布

阅读量82

点赞数

分类专栏：前端文章标签： css3 web

本文链接：https://blog.csdn.net/weixin_42848859/article/details/106193982

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、 CSS主要应用于前端样式的调整。想学习CSS的小伙伴们，我们可以先来了解下学习路线。

CSS选择器（重点）
盒子模型
浮动
定位
网页动画（了解即可）

2、练习

<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h2>CSS标题</h2>
<h1>这是标题</h1>

h1{
    color: red;
}
h2{
    color: aqua;
    size: 40px;
}

3、基本选择器

标签选择器

 h1{
            color: #82ff32;
            border-radius: 24px;
            background: beige;
        }
        p{
            font-size: 80px;
        }

类选择器

        .aa{
                color:blue;
        }
        .bb{
        color:fuchsia;
        }
        .cc{
        color:aqua;
        }
    </style>
</head>
<body>
<h1 class="aa">标题1</h1>
<h2 class="bb">标题2</h2>
<h3 class=cc>标题3</h3>
<p class="cc">p标签</p>

ID选择器

 #zxs{
            color: #82ff32;
        }
        #zxs1{
            color: black;
        }
        #zxs2{
            color: #82ff32;
        }
        .zxs3{
            color: yellow;
        }


    </style>
</head>
<body>
<h1 id="zxs">标题1</h1>
<h2 id="zxs1">标题2</h2>
<h3 id="zxs2">标题3</h3>
<p class="zxs3">p标签</p>

4、层次选择器

后代选择器：下面例子含义为：body下，所有的p标签背景颜色都是红色

/*
		后代选择器
		*/
		body p {
			background: red;
		}

子选择器：注意子，意思是，儿子，孙子辈不算的。也就是只有子一代生效

/*子选择器*/
		body > p {
			background: yellow;
		}

相邻兄弟选择器，同辈

/*兄弟选择器,只有一个，相邻，向下*/
        .active+p{
            background: #82ff32;
         }

通用选择器：当前选中元素向下的所有兄弟元素

.active~p{
			background: brown;
		}

愤怒的小油条

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单学习CSS-选择器1

1、 CSS主要应用于前端样式的调整。想学习CSS的小伙伴们，我们可以先来了解下学习路线。CSS选择器（重点）盒子模型浮动定位网页动画（了解即可）2、练习<link rel="stylesheet" href="./css/style.css"></head><body><h2>CSS标题</h2><h1>这是标题</h1>h1{ color: red;}h2{ color:
复制链接

扫一扫