兄弟选择器

最新推荐文章于 2023-10-16 00:42:35 发布

郁雨君@

最新推荐文章于 2023-10-16 00:42:35 发布

阅读量119

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_60489682/article/details/120858537

版权

版心

1.为什么要有版心？？

因为电脑的屏幕分辨率不同，为了可以在不同的电脑上可以显示。

2.CSS编写位置

1.行内式（不推荐）
      不推荐原因
         1.代码无法复用
         2.结构与样式没有分离：HTML叫结构，CSS叫样式代码

<div style="width:300px;height:200px;background-color:orange;"></div>

2. style标签内：
    此属性值无法覆盖行内样式，因为行内样式优先级高
3. 外链

3.优先级

行内>style>外链

4.兄弟选择器

1.+：相邻同胞：获取的是与p1相邻的h2标签，中间不能间隔其他标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	.p1~h2{
    		color:red;
    	}
    </style>

</head>
<body>
    <p class="p1">hello</p>
    <h2>标题</h2>
    <p>2132</p>
    <h2>遇见你</h2>
    <p>nn</p>
    <p>密码</p>
    <h2>体育方法</h2>
    <p>9956</p>
</body>
</html>
```html
 2.~：通用兄弟选择器：获取的是p1后面的h2标签，中间可以间隔其他标签
 ```html
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1+h2{
            color: red;
        }
    </style>

</head>
<body>
    <p class="p1">hello</p>
    <h2>标题</h2>
    <p>2132</p>
    <h2>遇见你</h2>
    <p>nn</p>
    <p>密码</p>
    <h2>体育方法</h2>
    <p>9956</p>
</body>
</html>

4.状态选择器

checked：定义和用法
checked 属性规定在页面加载时应该被预先选定的input元素
checked 属性与或配合使用
checked 属性也可以在页面加载后，通过JavaScript代码进行设置
checked语法：

郁雨君@

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
兄弟选择器

版心1.为什么要有版心？？因为电脑的屏幕分辨率不同，为了可以在不同的电脑上可以显示。2.CSS编写位置1.行内式（不推荐）不推荐原因 1.代码无法复用 2.结构与样式没有分离：HTML叫结构，CSS叫样式代码<div style="width:300px;height:200px;background-color:orange;"></div>2. style标签内：此属性值无法覆盖行内样式，因为行内样式优先
复制链接

扫一扫