2020/03/02~03 CSS选择器总结

在总结之前，先把三种整体的选择器写出来
标签选择器
标签名{ }
如：

div{ }

类选择器
.类名{ }
如：

.username{ }

id选择器
id{ }
如：

name{ }

<hr> <!--分割线-->

普遍选择器

选中所有：星号
*

选中直接子代：大于号
>

选中所有后代：空格

~~ ~~
嵌套选择
.类名空格 .类名{ }
如：选中类名为one下所有类名为name的后代

.one .name{ }

组合选择
.类名，.类名{ }
如：同时选中类名为one和two的标签

.one,.two{ }

选中同标签中类名为one的标签

div.one{ }

层次选择器（注：在末尾有可复制试验代码，包含所有情况，代码加截图)

选择某标签之后所有兄弟：波浪号~

选择某标签后下一个兄弟：加号+

属性选择器（注：在末尾无可复制试验代码，有机会再补上，可以用上面的尝试)

选择拥有某属性的标签
[属性名]{ }

选定有某属性的标签
标签[属性名]{ }

选定有某属性且某属性为某值的标签
标签[属性名=值]{ }

选定有某属性且某属性值的首位以X开头的标签
标签[属性名^=X]{ }

选定有某属性且某属性值的末尾以X结尾的标签
标签[属性名$=X]{ }

选定有某属性且某属性值中模糊匹配包含X的标签
标签[属性名*=X]{ }

选定有某属性且某属性值中精确匹配包含X的标签
标签[属性名~=X]{ }

选择默认选中的单选和复选框

[type=radio][checked]{ }

伪类选择器

选中某类标签中的第一个元素
.类名>*:first-child{ }

选中某类标签中的最后一个元素
.类名>*:last-child{ }

选中某类标签中的第n个元素 odd奇数，even偶数 3n+1
.类名>*:nth-child(n){ }

选中某类标签中的倒数第n个元素
.类名>*:nth-last-child(n){ }

选中某类标签中的每种类型的第一个孩子
.类名>*:first-of-type{ }

选中某类标签中的每种类型的最后一个孩子
.类名>*:last-of-type{ }

选中某类标签中的每种类型的第n个孩子
.类名>*:nth-of-type(n){ }

选中某类标签中的每种类型的倒数第n个孩子
.类名>*:nth-last-of-type(n){ }

选中某类标签中的唯一一个个孩子
.类名>*:only-child{ }

a标签伪类选择器(部分div等也可使用)

未被访问
a:link{ }

已访问过
a:visited{ }

鼠标悬停
a:hover{ }

鼠标点击
a:active{ }

表单伪类选择器

思路：标签[属性名=属性值]:内联样式属性名{ }
权值：
style属性内行内样式 1000
id选择器 100
class选择器,属性选择器,伪类选择器 10
标签选择器,伪元素选择器 1
空格其他 +~*> 0
如：

选中内联属性为disabled的type为text的input输入框
1	input[type=text]:disabled{ }
或
2	[type=text]:disabled{ }

选中所有必填项
:required{ }
选中所有input中type为number的必填项
input[type=number]:required{ }

选中所有可填项
:optional{ }
选中所有input中type为text的选填项
input[type=text]:optional{ }

选中默认选中的radio项
input[type=radio]:checked{ }

对特定选项的范围
[type=number]:in-range{ }
[type=number]:out-of-range{ }

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            text-align: center;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{ 
            text-align: center;
            display:inline-block;
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }
      
    </style>
</head>
<body>
    <div id="one" title="one">第一个元素
        <div id="one-one" title="one-one">第一个元素一代</div>
    </div>
    <div id="two" title="two"  >第二个元素</div>
    <div id="three" title="three">第三个元素
        <span id="three-one" title="three-one">第三个元素一代</span>
    </div>
    <div id="four" title="four">第四个元素</div>
    <span id="five" title="five">第五个元素</span>
    <div id="six" title="six">第六个元素
        <span id="six-one-odd">第六个元素一代哥哥
            <span id="six-odd-two" title="six-odd-two">第六个元素二代</span>
        </span>
        <span id="six-one-you">第六个元素一代弟弟</span>
    </div>
    <span id="seven">第七个元素</span>
    <div id="eight">第八个元素</div>
</body>

</html>

在这里插入图片描述

选择某标签之后所有兄弟：波浪号~

        #six-one-odd~*{
            /* 选择第六个元素第一代哥哥后所有兄弟 */
            background-color: pink;
        }

在这里插入图片描述

1		#four~*{
2            /* 选择第四个标签后所有兄弟 */
3            background-color: pink;
4       }

在这里插入图片描述
选择某标签后下一个兄弟：加号+

		#five+*{
            /* 选择第五个标签后下一个兄弟 */
            background-color: pink;
        }

在这里插入图片描述

		#six-one-odd+*{
            /* 选择第六个元素一代哥哥后下一个兄弟 */
            background-color: pink;
        }

在这里插入图片描述

来源：CSDN

作者：shaoyahu

链接：https://blog.csdn.net/shaoyahu/article/details/104618329

标签

css选择器

css第一个元素

css

css样式