CSS中的选择器总结

最新推荐文章于 2024-07-18 17:34:14 发布

程序媛小y

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量1.9k

点赞数 2

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_52834435/article/details/122513976

版权

css 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一.基本选择器

基本选择器：

标签选择器：针对一类标签
ID 选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

选择器	示例	描述
.class	.nav	选择 class=“intro” 的所有元素
#id	#firstname	选择 id=“firstname” 的所有元素
*	*	选择所有元素
element	p	选择所有元素
element,element	div,p	选择所有元素和所有元素

二.结构选择器

选择器	示例	描述
element element	div p	选择元素内部的所有元素(所有后代元素)
element>element	div>p	选择父元素为元素的所有元素(儿子)
element+element	div+p	选择紧接在元素之后的元素(最近的一个兄弟)
element~element2	p~ul	选择元素同级并在元素后面的所有元素(兄弟)

1.后代选择器,用空格隔开

.div1 p {
        color: red;
}

空格就表示后代。.div1 p 表示.div1的后代所有的p。

2.子代选择器，用符号`>`表示

div > p {
    color: red;
}

div 的儿子 p。和 div 的后代 p 的截然不同。

3.紧邻兄弟元素

用于选择紧挨着的同级兄弟元素。

h3 + p {
        color: red;
}

上方的选择器意思是：选择的是 h3 元素后面紧挨着的第一个兄弟。

4.后面兄弟元素

用于选择后面的所有兄弟元素。

p~ul {
	color:red;
}

选中p标签后的所有兄弟标签的ul。

三.属性选择器

根据属性来为元素设置样式。

选择器	示例	描述
[attribute]	[target]	带有 target 属性所有元素
[attribute=value]	[target=_blank]	targe 属性等于"_blank" 的所有元素
[attribute~=value]	[title~=houdunren]	title 属性包含单词 “houdunren” 的所有元素
[attribute\|=value]	[title\|=hd]	`title 属性值为 "hd"的单词，或hd-cms` 以`-`连接的的独立单词
[attribute*=value]	a[src*=“hdcms”]	src 属性中包含 “hdcms” 字符的每个元素
[attribute^=value]	a[src^=“https”]	src 属性值以 “https” 开头的每个元素
[attribute$=value]	a[src$=".jpeg"]	src 属性以 “.jpeg” 结尾的所有元素

1.为具有 class 属性的h1标签设置样式

h1[class] {
    color: red;
}
...

<h1 class="container">xioafeixia</h1>

2.约束多个属性

h1[class][id] {
    color: red;
}
...

<h1 class="container" id >xioafeixia</h1>

3.具体属性值设置样式

a[href="https://www.baidu.com"] {
    color: green;
}
...

<a href="https://www.baidu.com">hhh</a>
<a href="">HDCMS</a>

^ 以指定值开头的元素

h2[name^="p"] {
    color: red;
}
...

<h2 name="p1">xioafeixia</h2>
<h2 name="p2">xioafeixia</h2>

$ 以指定值结尾的元素

<h2 name="1person">xiaofeixia</h2>
<h2 name="2">xiaofeixia</h2>
...

h2[name$="person"] {
    color: red;
}

* 属性内部任何位置出现值的元素

h2[name*="dog"] {
    color: red;
}
...

<h2 name="bigdog">xiaofeixia</h2>
<h2 name="dog.com">xiaofeixia</h2>

~ 属性值中包含指定词汇的元素

必须是属性中包含这个关键词，而不是指定关键词属于这个属性的单词中一部分。

h2[name~="person"] {
    color: red;
}
...

<h2 name="1person">xiaofeixia</h2>/*此时第一个h2不生效，是包含指定词汇，而不是一个词汇中出现目标词汇*/
<h2 name="person one">xiaofeixia</h2>

| 以指定值开头或以属性连接破折号的元素

h2[name|="person"] {
    color: red;
}
...

<h2 name="person">xiaofeixia</h2>
<h2 name="person-web">xiaofeixia</h2>

四.伪类选择器

为元素的不同状态或不确定存在的元素设置样式规则。

所有选择器总和

状态	示例	说明
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	选择文档的根元素即html。
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。
:nth-child(odd)	p:nth-child(odd)	选择属于其父元素的奇数元素。
:nth-child(even)	p:nth-child(even)	选择属于其父元素的偶数元素。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:not(selector)	:not§	选择非元素的每个元素

伪类选择器：

超链接伪类
结构伪类
表单伪类
字符伪类

静态伪类和动态伪类:

伪类选择器分为两种。

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

:link 超链接点击之前
:visited 链接被访问过之后

PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

1.超链接伪类

定义超链接的不同状态

超链接的四种状态

a标签有4种伪类（即对应四种状态）。如下：

:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。

在css中，这四种状态必须按照固定的顺序写：

a:link 、a:visited 、a:hover 、a:active

a:link {
    color: red
}

a:visited {
    color: green
}

a:hover {
    color: blue
}

a:active {
    color: yellow
}
...

<a href="https://www.baidu.com">后盾人</a>

不只是链接可以使用伪类，其他元素也可以使用。下面是对表单的点击与获取焦点状态的样式设置。

input:focus {
    background: green;
}

input:hover {
    background: blue;
}

input:active {
    background: yellow;
}
...

<input type="text">

2.结构伪类

:first-child

div p:first-child {
    color: antiquewhite;
}

<article>
    <span>xiaofeixia</span>
    <div>
        <p>123</p>
        <p>456</p>
    </div>
</article>

选中div的子元素的第一个。

:first-of-type

    div div:first-of-type {
        color: antiquewhite;
    }
    
    <article>
        <span>xiaofeixia</span>
        <div>
            <p>123</p>
            <div>hhhh</div>
            <div>bbbbb</div>
            <p>456</p>
        </div>
    </article>

选择类型是div的第一个元素

:only-child:

:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

article span:only-child {
    color: red;
}
...

<article>
	<span>xiaofeixia</span>
	<aside>
		<span>xiaofeixia</span>/*这个元素生效*/
	</aside>
</article>

解释：

这里要找出：sapn的父元素只有一个子元素。然后将这个子元素生效。靠上的那个span还有兄弟元素，所以不生效。

:only-of-type

选择同级中类型是span 的唯一子元素

article span:only-of-type {
    color: red;
}

div:only-of-type{
    background-color:red;
}

<article>
    <span>xiaofeixia</span>
    <aside>
        <span>xiaofeixia</span>
        <span>xiaofeixia</span>
    </aside>
</article>

<div id="main" class="x">
    <div id="a">第一个DIV</div>
    <div id="b">第一个DIV</div>
    <p>第一个P</p>
</div>

这里的第一个xiaofeixia生效。

此时选择的div，是id为main的div，它是元素body的唯一类型（div）的元素，所以整个div会变红。

:nth-child(n)

选择第二个元素并且是span标签的。

article span:nth-child(2) {
    color: red;
}
...

<article>
  <span>xiaofeixia</span>
  <aside>
    <span>xiaofeixia</span>
    <span>14563</span>/*这里样式生效*/
  </aside>
  <span>ggggggghjsn</span>
</article>

:nth-of-type(n)

选择第二个span 元素，不管中间的其他元素

article span:nth-of-type(2) {
        color: red;
}
    ...
    
<article>
    <span>xaiofeixia</span>
    <aside>
        <span>xaiofeixia</span>
        <span>dsgsg</span>/*样式生效*/
    </aside>
    <span>jfhfgsgssgs</span>/*样式生效*/
</article>

计算数量

n为0/1/2/3… ，下面是隔列变色

table tr>td:nth-child(2n+1) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

从第三个开始设置样式

table tr>td:nth-child(n+3) {
    background: rgb(128, 35, 2);
    color: white;
}

设置前三个元素

table tr>td:nth-child(-n+3) {
    background: rgb(128, 35, 2);
    color: white;
}

偶数元素

选择偶数单元格

table tr>td:nth-child(even) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

奇数元素

选择奇数单元格

table tr>td:nth-child(odd) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

:nth-last-child(n)

从最后一个元素开始获取

table tr>td:nth-last-child(2n+1){
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

取最后两个元素

main>ul li:nth-last-child(-n+2) {
	color: red;
}

:nth-last-of-type(n)

从最后一个元素开始选择span 标签。

article span:nth-last-of-type(1) {
    background: red;
    color: white;
}
...

<article>
  <aside>
  	<span>houdunren.com</span>
  	<span>houdunwang.com</span>
  	<strong>hdcms.com</strong>
  </aside>
	<span>hdphp.com</span>
</article>

:not(selector)

排除第一个li元素

ul li:not(:nth-child(1)) {
    background: red;
}
...

<ul>
  <li>houdunren.com</li>
  <li>hdcms.com</li>
  <li>后盾人</li>
</ul>

3.表单伪类

选择器	示例	说明
:enabled	input:enabled	选择每个启用的 input 元素
:disabled	input:disabled	选择每个禁用的 input 元素
:checked	input:checked	选择每个被选中的 input 元素
:required	input:required	包含`required`属性的元素
:optional	input:optional	不包含`required`属性的元素
:valid	input:valid	验证通过的表单元素
:invalid	input:invalid	验证不通过的表单

表单属性样式

input:enabled {
    background: red;
}

input:disabled {
    background: #dddddd;
}

input:checked+label {
    color: green;
}
...

<input type="text" disabled>
<input type="text" name="info">

<input type="radio" name="sex" checked id="boy">
<label for="boy">男</label>
<input type="radio" name="sex" checked id="girl">
<label for="girl">女</label>

表单必选样式

input:required {
    border: solid 2px blue;
}

input:optional {
	background: #dcdcdc; 
	border: none;
}
...

<input type="text" name="title" required>
<input type="text" name="name">

表单验证样式

input:valid {
    border: solid 1px green;
}

input:invalid {
    border: solid 1px red;
}
...

<form>
<input type="email">
<button>保存</button>
</form>

4.字符伪类

状态	示例	说明
::first-letter	p::first-letter	选择每个元素的首字母
::first-line	p:first-line	选择每个元素的首行
::before	p:before	在每个元素的内容之前插入内容
::after	p:after	在每个元素的内容之后插入内容

首字母大写：

p::first-letter {
    font-size: 20px;
}

<p>
    好好学习，天天向上
</p>

段落首行处理:

p::first-line {
    font-size: 30px;
}

<p>
    好好学习，天天向上。好好学习，天天向上。<br>好好学习，天天向上。好好学习，天天向上
</p>

在元素前后添加：

span::before {
    content: '⇰';
    color: red;
}
span::after {
    content: '⟲';
    color: green;
}
...

<span>小飞侠</span>

程序媛小y

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS中的选择器总结

文章目录一.基本选择器二.结构选择器1.后代选择器,用空格隔开2.子代选择器，用符号`>`表示3.紧邻兄弟元素4.后面兄弟元素三.属性选择器四.伪类选择器1.超链接伪类2.结构伪类:first-child:first-of-type:only-child::only-of-type:nth-child(n):nth-of-type(n)计算数量偶数元素奇数元素:nth-last-child(n):nth-last-of-type(n):not(selector)3.表单伪类表单属性样式表单必选样式表单
复制链接

扫一扫