css :visible选择器
时间: 2024-07-12 10:01:10 浏览: 82
`:visible` 是 CSS 中的一个伪类选择器,用于匹配那些在视觉上(即对于用户)可见的元素。当一个元素被CSS定义为 `display: none;` 或者其父元素设置了 `visibility: hidden;` 以及其他导致元素不显示的情况,尽管它的布局位置还在页面上,但是不会占据空间或对用户交互造成影响,这时这个元素就不是 `:visible` 选择器所匹配的。
简单来说,`:visible` 会选择那些:
- 具有非零宽度和高度的元素
- `display` 属性不是 `none`
- `visibility` 属性不是 `hidden`
- `opacity` 属性大于 0
- 并且没有被任何其他 CSS 规则完全隐藏(比如 `overflow: auto` 下超出的内容)
相关问题
element 日期选择器添加按钮
您可以添加一个按钮,用来触发日期选择器的打开和关闭。
以下是一个示例代码,其中添加了一个按钮,点击按钮可以打开和关闭日期选择器:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期选择器</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-input v-model="date" placeholder="请选择日期" readonly></el-input>
<el-button @click="showPicker">选择日期</el-button>
<el-date-picker v-model="date" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :visible.sync="pickerVisible"></el-date-picker>
</div>
<script>
new Vue({
el: '#app',
data: {
date: '',
pickerVisible: false
},
methods: {
showPicker() {
this.pickerVisible = true;
}
}
})
</script>
</body>
</html>
```
在上面的代码中,我们首先添加了一个按钮,`@click`绑定了一个`showPicker`方法,用来打开日期选择器。然后添加了一个日期选择器,并且使用`:visible.sync`绑定了一个`pickerVisible`变量,用来控制日期选择器的打开和关闭。
在`showPicker`方法中,我们将`pickerVisible`变量设置为`true`,从而打开日期选择器。
如果您想要关闭日期选择器,可以在日期选择器中添加一个按钮,并绑定一个方法来关闭日期选择器,示例代码如下:
```
<el-date-picker v-model="date" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :visible.sync="pickerVisible">
<el-button slot="footer" size="small" @click="closePicker">取消</el-button>
</el-date-picker>
```
在上面的代码中,我们在日期选择器中添加了一个按钮,`@click`绑定了一个`closePicker`方法,用来关闭日期选择器。
完整的代码示例可以在以下链接中查看:https://codepen.io/element/pen/QQmKaa。
.sj-book-transform div[page="1"] > div, .sj-book-transform div[page="2"] > div{ overflow:visible !important; }
这段 CSS 代码是为了选中具有 `page` 属性为 `"1"` 或 `"2"` 的父元素下的子元素,并设置它们的 `overflow` 属性为 `visible`。具体解释如下:
```css
.sj-book-transform div[page="1"] > div,
.sj-book-transform div[page="2"] > div {
overflow: visible !important;
}
```
- `.sj-book-transform` 是一个类选择器,用于选中具有 `class` 为 `sj-book-transform` 的元素。
- `div[page="1"] > div` 选择了具有 `page` 属性为 `"1"` 的父元素下的子元素。
- `div[page="2"] > div` 选择了具有 `page` 属性为 `"2"` 的父元素下的子元素。
- `overflow: visible !important` 设置了这些选中元素的 `overflow` 属性为 `visible`。`!important` 用于提高优先级,确保这个样式优先生效。
通过使用上述代码,你可以为具有特定 `page` 属性值的父元素下的子元素设置 `overflow` 为 `visible`,以控制其内容的溢出和显示方式。