CSS的这些选择器你都学会了吗？

最新推荐文章于 2024-05-16 11:24:56 发布

YUGAN__

最新推荐文章于 2024-05-16 11:24:56 发布

阅读量457

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_72826314/article/details/126046760

版权

css选择器

4种常用选择器

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素

一般用来清除页面内外边距

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

标签选择器

标签选择器根据标签名称来选择 HTML 元素

在这里，页面上的所有 p 元素都将居中对齐，并带有红色文本颜色

p {
  text-align: center;
  color: red;
}

类名选择器

类名选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

所有带有 class=“center” 的 HTML 元素将为红色且居中对齐：

.center {
  text-align: center;
  color: red;
}

id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

这条 CSS 规则将应用于 id=“para1” 的 HTML 元素：

#para1 {
  text-align: center;
  color: red;
}

并集选择器

并集选择器选取所有具有相同样式定义的 HTML 元素

请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

可以写成：

h1, h2, p {
  text-align: center;
  color: red;
}

后代选择器

当一个p标签嵌套在一个di>标签内部的时候，就可以将这个p标签看作是div标签的后代。当我们需要选择一个标签的后代标签时，就可以使用后代选择器。后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列，中间使用空格分开，如下所示：

ul li a {
    text-decoration: none;
}

ul li a选择器仅会匹配无序列表ul标签的所有后代a标签。

子选择器

子选择器与后代选择器类似，不过子选择器只会匹配某个元素的直接后代（元素与其子元素之间只有一层嵌套关系），子选择器由两个或多个选择器组成，选择器之间用大于号>分隔开，如下所示：

p > strong {
    color:red;
}

p > strong选择器会将下面代码中第一个p标签的子标签strong内的文字设置为红色，但对第二个p标签中的strong标签则没有影响。

相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素，如下所示：

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

h1 + p选择器会匹配同一父级元素下紧邻h1标签并在其后的p标签。ul.task + p选择器则会匹配同一父级元素下紧邻ul标签并在其后的p标签，但ul要具有class="task"属性。

通用兄弟选择器

通用兄弟选择器与相邻兄弟选择器非常相似，但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素，如下所示：

h1 ∼ p {
    color: blue;
    font-size: 18px;
}

h1 ∼ p选择器会匹配同一父级元素下h1标签之后的所用p标签。

属性选择器

属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号[ ]来指定标签具有的属性信息，如下所示：

input[type="text"] {
   color: blue;
}

input[type=“text”]选择器会匹配所有具有type="text"属性的标签。
属性选择器中方括号[ ]内的属性信息还支持以下几种写法：

[target]：选择所有带有target属性元素；
[[target=_blank]：选择所有具有target=“_blank” 属性的元素；
[title~=flower]：选择title属性包含单词“flower”的所有元素
[lang^=en]：选择lang属性正好是“en”为开头的所有元素。
[lang$=en]：选择lang属性正好是“en”为结尾的所有元素。

特殊选择器

1、first-child
能够匹配指定父元素下的第一个子元素

        ul li:first-child {     /*匹配<ul>下的第一个<li>标签*/
            color: red;
        }

2、last-child
能够匹配指定父元素下的最后一个子元素

        ul li:last-child {      /*匹配<ul>下的最后一个<li>标签*/
            color: red;
        }

3、nth-child
可以匹配指定元素下的第 n 个子元素

        ul li:nth-child(2) {    /*匹配<ul>下的第二个<li>标签*/
            color: red;
        }

:checked

input:checked

匹配处于选中状态的 input元素

CSS 中提供了各种各样的伪类，如下表所示：

在这里插入图片描述

伪类选择器

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。
伪类选择器分为两种：静态伪类和动态伪类

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接
（2）动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

	   /*让超链接点击之前是红色*/
		a:link{
			color:red;
		}

		/*让超链接点击之后是绿色*/
		a:visited{
			color:orange;
		}
		/*鼠标悬停，放到标签上的时候*/
		a:hover{
			color:green;
		}
		/*鼠标点击链接，但是不松手的时候*/
		a:active{
			color:black;

记住，在css中，这四种状态必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active

   /*
	让文本框获取焦点时：
	边框：#FF6F3D这种橙色
	文字：绿色
	背景色：#6a6a6a这种灰色
   */
	input:focus{
		border:3px solid #FF6F3D;
		color:white;
		background-color:#6a6a6a;
	}

:disabled 禁用 :checked

        #weilei input:disabled {
            background-color: #999;
        }

<input type="text" value="jinyong" disabled>` 


        input:checked {
            width: 50px;
            height: 50px;
        }
    <input name="sex" type="radio">男
    <input name="sex" type="radio">女