天学习下css的伪类选择器，学习好伪类选择器，可以更好的写出精美的页面。

伪类选择器（Pseudo-class selectors）是CSS中一种特殊的选择器，它用于定义元素的特殊状态。这些状态不是由HTML直接定义的，而是由用户的行为或元素的特定状态触发的。伪类选择器允许你基于这些状态来应用样式规则，从而创建出更加动态和交互性强的网页。

伪类选择器通常与HTML元素或类选择器结合使用，以指定在特定条件下应如何显示这些元素。它们以冒号（:）开头，后跟伪类的名称和可能包含的参数。

以下是一些CSS3中常用的伪类选择器及其对应的HTML代码示例。这些伪类选择器允许你基于不同的状态和条件来样式化元素。

1. :hover

用于当鼠标悬停在元素上时改变元素的样式。

HTML:

<div class="button">悬停我试试</div>

CSS:

.button:hover {  
  background-color: blue;  
  color: white;  
}

2. :active

用于当元素被激活时（如鼠标点击但尚未释放）改变元素的样式。

HTML:

<button class="active-button">点击我</button>

CSS:

.active-button:active {

background-color: green;

color: white;

}

3. :focus

用于当元素获得焦点时（如用户点击或通过键盘导航到）改变元素的样式。

HTML:

<input type="text" class="focus-input" placeholder="点击这里并输入">

CSS:

.focus-input:focus {

border: 2px solid orange;

outline: none; /* 移除默认的焦点轮廓 */

}

4. :first-child

选择某个父元素下的第一个子元素。

HTML:

<ul>

<li>第一个列表项</li>

<li>第二个列表项</li>

<li>第三个列表项</li>

</ul>

CSS:

ul li:first-child {

color: red;

}

5. :last-child

选择某个父元素下的最后一个子元素。

HTML: 同上

CSS:

ul li:last-child {

color: green;

}

6. :nth-child(n)

选择某个父元素下的第n个子元素，其中n可以是数字、关键词（如odd或even）或公式。

HTML: 同上

CSS:

/* 选择每个父元素下的第二个子元素 */

ul li:nth-child(2) {

background-color: yellow;

}

/* 选择每个父元素下的奇数子元素 */

ul li:nth-child(odd) {

font-weight: bold;

}

7. :nth-last-child(n)

与:nth-child(n)类似，但它是从后往前计数。

HTML: 同上

CSS:

/* 选择每个父元素下的倒数第二个子元素 */

ul li:nth-last-child(2) {

text-decoration: underline;

}

8. :checked

用于选择被选中的<input type="checkbox">或<input type="radio">元素。

HTML:

<label><input type="checkbox" class="check"> 选项1</label>

<label><input type="checkbox" class="check"> 选项2</label>

CSS:

.check:checked + label {

font-weight: bold;

}

请注意，:checked伪类选择器通常与+选择器结合使用，以选择紧跟在选中复选框或单选按钮之后的元素（如标签）。

这些伪类选择器非常强大，能够让你根据用户与网页的交互来动态地改变元素的样式。

实际业务开发中，我们常常需要获取用户选择的单选按钮的值，比如用户在注册时选择性别、问卷调查时选择答案等。今天，我们就来聊聊如何在JavaScript中获取单选按钮组的值。

实际业务场景

假设我们正在开发一个用户注册页面，用户需要选择他们的性别。我们使用了一组单选按钮来表示性别选项。HTML代码如下：

<div>
  <input type="radio" id="genderm" name="gender" value="male" />
  <label for="genderm">男</label>
  <input type="radio" id="genderf" name="gender" value="female" checked />
  <label for="genderf">女</label>
</div>

在这个例子中，我们有两个单选按钮，用户可以选择“男”或“女”。默认情况下，选中了“女”。

获取单选按钮组的值

在JavaScript中，我们可以使用document.querySelector方法来获取被选中的单选按钮，然后通过它的value属性来获取对应的值。

具体的实现代码如下：

const selectedGender=document.querySelector('input[name="gender"]:checked').value;
console.log(selectedGender); // 输出: "female"

解释一下这段代码：

1. document.querySelector('input[name="gender"]:checked')：这段代码会返回被选中的name属性为“gender”的单选按钮元素。
2. .value：通过value属性获取该单选按钮的值。

所以，当我们运行这段代码时，selectedGender的值会是“female”，因为默认情况下“女”按钮是选中的。

结束

在业务开发中，使用JavaScript来获取单选按钮组的值非常简单。我们只需要利用document.querySelector方法来获取被选中的单选按钮，然后通过value属性来获取其值。

这个方法不仅适用于性别选择，还可以应用于任何需要单选的场景，比如问卷调查、选项设置等。掌握了这个技巧，可以让我们的开发工作更加高效，代码更加简洁。

篇文章主要的向大家介绍了关于html input标签的单选按钮的使用方法，还有关于HTML input标签的单选默认按钮的做法。接下来我们一起来看看这篇文章吧

首先我们介绍的是在html input标签中的单选按钮的做法：

<input> 标签用于搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

话不多说，上代码实例：

> <form action="form_action.asp" method="get">
> 
> <input type="radio" name="radio" value="1">单选1
> 
> <input type="radio" name="radio" value="2">单选2
> 
> <input type="radio" name="radio" value="3">单选3
> 
> <input type="radio" name="radio" value="4">单选4
> 
> </form>

这个的效果很容易看到，我们还是先看看浏览器中的显示效果吧：

这个效果一眼就能看到，很简单的一个代码

还有种是很多网站上都是经常见到的，比如：单选性别，这个基本上都是用这种单选框去制作的。代码如下：

HTML中的单选按钮实现男女性别选择，不让男女同是都能都能选择，实现方法：在按钮的属性里写一个name属性，并且把name的值设置成相同的

> <input id="man" type="radio" checked="checked" name="1" />男
> 
> <input id="woman" type="radio" name="1"/>女

这个就不给图了，比上面那个还简单，就两个单选框，我们经常遇到的这个。

现在来说说HTML单选框按钮怎么默认选中：

首先我们先把第一个实例拿出来继续说，我们只需要在其中加一个属性，如下：

> <form action="form_action.asp" method="get">
> 
> <input type="radio" name="radio" value="1">单选1
> 
> <input type="radio" name="radio" value="2" checked>单选2
> 
> <input type="radio" name="radio" value="3">单选3
> 
> <input type="radio" name="radio" value="4">单选4
> 
> </form>

效果依旧很明显，看效果图：

这上面我没做任何的点击，自己出现在那上面的，刷新过后还能看到在单选2上面。

我们就可以看到，这样就把单选框给默认选中了，大家可以自己试试，多敲敲代码。

好了，以上就是这篇关于html input标签做单选按钮的文章了，有问题的可以在下方提问。

以上就是html单选按钮默认选中怎么做？input标签的单选按钮用法实例的详细内容，更多请关注我！！！

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。