CSS选择器

转角羊儿

已于 2022-12-17 23:26:10 修改

阅读量556

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2022-06-11 15:55:54 首次发布

本文链接：https://blog.csdn.net/qq_41988669/article/details/125235475

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文章目录

选择器

选择器

一、基本选择器

命名规则：
1、只能包含字母、数字、-、_
2、只能以字母开头
3、区分大小写
4、多个标签可以有相同的类名
5、一个html文档中id值唯一

“*” 通用元素选择器，匹配任何元素
h1 标签选择器，匹配所有使用h1标签的元素
.title class选择器，匹配所有class属性中包含title的元素
- 根据需要可以定义二个或二个以上的标签
  - 例：
```
    <h2 class="title html5">HTML5T CSS3新特性</h2>
```
#footer id选择器，匹配所有id属性等于footer的元素

二、多元素的组合选择器

E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E > F 子元素选择器，匹配所有E元素的子元素F
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E ~ F 匹配任何在E元素之后的同级F元素

三、伪类选择器

css伪类选择器大全：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

伪类	含义
:link	选中未访问过的超链接
:visited	选中已访问过的超链接
:hover	选中鼠标移入的元素
:active	选中鼠标按下的元素
:focus	选中聚焦的表单元素
:disabled	选中被禁用的表单元素
:checked	选中被选中的表单元素
:first-child	选中第一个子元素
:last-child	选中最后一个子元素
:nth-child(an+b)	选中第「an+b」个子元素 a和b是常量，n的值会从0开始依次递增
:first-of-type	选中第一个指定类型的子元素
:last-of-type	选中最后一个指定类型的子元素
:nth-of-type(an+b)	选中第「an+b」个指定类型的子元素 a和b是常量，n的值会从0开始依次递增

E:not(s) 匹配不符合当前选择器的任何元素

E:target 匹配文档中特定"id"点击后的效果

E::selection 匹配用户当前选中的元素

四、结构性伪类

E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

五、伪元素选择器

E:first-line 匹配E元素的第一行
E:first-letter 匹配E元素的第一个字母
E:before 在E元素之前插入生成的内容
E:after 在E元素之后插入生成的内容

例：

span::before{
    content:"《";
    color:red;
}

span::after{
    content:"》"
    color:red;
}

六、属性选择器

E[att^=“val”] 属性att的值以"val"开头的元素
E[att$=“val”] 属性att的值以"val"结尾的元素
E[att*=“val”] 属性att的值包含"val"字符串的元素

七 input:checked + label；input:checked ~ label

input:checked ~ label ：相邻同胞选择器，选择被勾选的input标签后所有的label标签［input 和 label标签有共同的父元素］；

input:checked ＋ label ：相邻同胞选择器，选择被勾选的input标签后第一个label标签［input 和 label标签有共同的父元素］；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 
 
 
#checked_1:checked+label{
    background-color:red;
}

.checked_class:checked~label{
    background-color:red;
}

 
</style>
</head>

<body>

<div >
  <input id="checked_1" type="checkbox"  />
  <label for="checked_1">aaaa</label>
  <label for="checked_1">bbbb</label>
</div> 

<div >
  <input id="checked_2" class="checked_class" type="checkbox"  />
  <label for="checked_2">aaaa</label>
  <label for="checked_2">bbbb</label>
</div> 

 
</body>
</html>