前端面试题
前端面试题
都有哪些选择器用于选取 HTML 文档中的元素
1.元素选择器（也叫标签选择器）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
p {
font-family: 宋体, sans-serif, Arial, "Times New Roman", 微软雅黑, "Microsoft YaHei UI", serif;
}
</style>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<div>盒子一</div>
</body>
</html>
2.类选择器
.highlight {
background - color: yellow;
}
<p class="highlight">这是一段突出显示的文字。</p>
<div class="highlight">这是一个突出显示的盒子。</div>
3.ID 选择器
<header id="header">
<h1>网站标题</h1>
</header>
在CSS中：
```css
#header {
border - bottom: 1px solid black;
}
4.后代选择器（也叫包含选择器）
后代选择器用于选择某个元素的后代元素。它的语法是用空格隔开的两个选择器，例如
div p会选中所有在<div>元素内部的<p>元素。
<div>
<p>这是一个在div中的段落。</p>
</div>
<p>这是一个不在div中的段落。</p>
在CSS中：
```css
div p {
font - style: italic;
}
5.子元素选择器
子元素选择器用于选择某个元素的直接子元素。它使用大于号（>）来表示，例如ul > li会选中所有<ul>元素的直接子元素<li>。
<ul>
<li>直接子项1</li>
<li>
<span>间接子项</span>
</li>
</ul>
在CSS中：
```css
ul > li {
list - style - type: square;
}
与后代选择器不同的是，子元素选择器只选择直接子元素，不会选择更深层次的后代元素。
6.相邻兄弟选择器
相邻兄弟选择器用于选择紧跟在某个元素后面的兄弟元素。它使用加号（+）来表示，例如h2 + p会选中所有紧跟在<h2>元素后面的<p>元素。
<h2>标题</h2>
<p>紧跟标题后的段落。</p>
<p>这是另一个段落。</p>
在CSS中：
```css
h2 + p {
margin - top: 0;
}
7.通用兄弟选择器
通用兄弟选择器用于选择某个元素后面的所有兄弟元素。它使用波浪号（~）来表示，例如h3 ~ p会选中所有在<h3>元素后面的<p>元素。
<h3>小标题</h3>
<p>段落1。</p>
<p>段落2。</p>
在CSS中：
```css
h3 ~ p {
text - decoration: underline;
}
8.属性选择器
属性选择器可以根据元素的属性来选择元素。有多种形式，例如[attribute]会选中带有指定属性的所有元素，[attribute=value]会选中属性等于指定值的元素等。
<input type="text">
<input type="password">
在CSS中，要选择`type`为`text`的输入框可以这样写：
```css
input[type = "text"] {
border: 1px solid blue;
}
9.伪类选择器
伪类选择器用于选择处于特定状态的元素，比如:hover用于选择鼠标悬停的元素，:active用于选择被激活（如鼠标按下）的元素等。
<a href="#">链接</a>
在CSS中：
```css
a:hover {
color: green;
}
10.伪元素选择器
伪元素选择器用于创建一些在文档树中不存在的元素，并为它们添加样式。例如::before和::after可以在元素内容之前或之后添加内容并设置样式。
<p>这是一个段落。</p>
p::before {
content: "前置内容 - ";
color: gray;
}
怎样通过document获取元素的值
1.通过id获取元素（getElementById）
<input type="text" id="myInput">
- 在JavaScript中，可以这样获取它的值：
```javascript
var inputElement = document.getElementById("myInput");
var value = inputElement.value;
console.log(value);
2.通过class获取元素（getElementsByClassName）
<button class="myButton">按钮1</button>
<button class="myButton">按钮2</button>
<button class="myButton">按钮3</button>
- 在JavaScript中获取它们的值（以获取按钮的文本为例）：
```javascript
var buttonElements = document.getElementsByClassName("myButton");
for (var i = 0; i < buttonElements.length; i++) {
var buttonValue = buttonElements[i].textContent;
console.log(buttonValue);
}
3.通过标签名获取元素（getElementsByTagName）
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
- 在JavaScript中：
```javascript
var pElements = document.getElementsByTagName("p");
for (var i = 0; i < pElements.length; i++) {
var pValue = pElements[i].textContent;
console.log(pValue);
}
4.通过querySelector和querySelectorAll获取元素
<div class="highlight">元素1</div>
<div>元素2</div>
<div class="highlight">元素3</div>
- 在JavaScript中：
```javascript
// document.querySelector方法用于获取匹配指定 CSS 选择器的第一个元素。
var firstHighlightElement = document.querySelector(".highlight");
var value = firstHighlightElement.textContent;
console.log(value);
<div class="highlight">元素1</div>
<div>元素2</div>
<div class="highlight">元素3</div>
// document.querySelectorAll方法用于获取匹配指定 CSS 选择器的所有元素
var highlightElements = document.querySelectorAll(".highlight");
for (var i = 0; i < highlightElements.length; i++) {
var elementValue = highlightElements[i].textContent;
console.log(elementValue);
}
说一下怎样使用CSS实现居中
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#a {
width: 880px;
height: 800px;
background-color: gray;
// flex:表示弹性布局
display: flex;
// 在主轴方向上居中排列。
justify-content: center;
// 在垂直方向上处于容器的中间位置。
align-items: center;
}
#b {
width: 300px;
height: 300px;
background-color: red;
}
</style>
<body>
<div id="a">
<div id="b">
</div>
</div>
</body>
</html>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#a {
width: 880px;
height: 800px;
background-color: gray;
position: relative;
}
#b {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div id="a">
<div id="b">
</div>
</div>
</body>
</html>
效果图
v-if和v-show有什么区别
v - if和v - show都是 Vue.js 中的指令，用于控制元素的显示与隐藏，但它们之间有一些重要的区别:
v - if是真正的条件渲染。它会根据表达式的值，在 DOM 中添加或者移除元素。
v - show只是简单地切换元素的display样式。无论初始条件是true还是false，元素都会被渲染。
