sass笔记（一）

砥砺前行前程似锦

于 2022-04-22 13:59:37 发布

阅读量234

点赞数

分类专栏：学习笔记文章标签：前端

本文链接：https://blog.youkuaiyun.com/fan2016434589/article/details/124314169

版权

学习笔记专栏收录该内容

4 篇文章

订阅专栏

1、body.ie

举例来说，当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下

#content aside {
  color: red;
  body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

2、属性嵌套

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

3、css选择器 ~ （波浪号）、+（加号）、＞（大于号）

~（波浪号）

~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。

<style>
        h3~h5{
            color: red;
        }
</style>

<body>
    <div>
        <h1>我是第1行</h1>
        <h2>我是第2行</h2>
        <div>
            <h3>我是第3行</h3>
            <h5>我是测试行</h5>
            <h4>我是第6行</h4>
            <h5>我是测试行</h5>
        </div>
        <h4>我是第4行</h4>
        <h5>我是第5行</h5>
    </div>
</body>

效果如下图：

+（加号）

~（加号）加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。

<style>
        h3+h5{
            color: red;
        }
</style>

<body>
    <div>
        <h1>我是第1行</h1>
        <h2>我是第2行</h2>
        <div>
            <h3>我是第3行</h3>
            <h5>我是测试行</h5>
            <h4>我是第6行</h4>
            <h5>我是测试行</h5>
        </div>
        <h4>我是第4行</h4>
        <h5>我是第5行</h5>
    </div>
</body>

运行效果：

>（大于号）

大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素，其中B元素是A元素的第一代。

<style>
        .myDiv>h3{
            color: red;
        }
</style>

<body>
    <div>
        <h1>我是第1行</h1>
        <h2>我是第2行</h2>
        <div class="myDiv">
            <h3>我是测试行</h3>
            <div>
                <h3>我也是测试行</h3>
            </div>
        </div>
        <h4>我是第4行</h4>
        <h5>我是第5行</h5>
    </div>
</body>

效果如下图：