CSS选择器有哪些

最新推荐文章于 2022-05-12 20:25:12 发布

Lance2574

最新推荐文章于 2022-05-12 20:25:12 发布

阅读量436

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/Lance2574/article/details/119578041

版权

本文详细介绍了CSS中的各种选择器，包括标签选择器、类名选择器、ID选择器、通用选择器、层次选择器、多选择器、属性选择器、伪类选择器和伪元素选择器。通过实例展示了它们在网页样式的设置和元素选择中的具体用法，帮助理解CSS选择器的灵活性和强大功能。

摘要由CSDN通过智能技术生成

一、标签选择器

标签选择器又叫元素选择器，使用元素名可以直接选中相同的元素。

<style>
        p{
            color: tomato;
        }
        li{
            border: 1px solid rgb(252, 249, 76);
        }
</style>

<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>c</li>
    </ul>
    </div>
</body>

二、类名选择器
类选择器以"."开头，后面紧跟类名,不允许有空格,与元素的class属性值保持一致,一个元素可以有多个class值,每个值之间通过空格分开。

        .one{
            background-color: red;
        }
        .two{
            background-color: green;
        }
        .three{
            background-color: orange;
        }
        .circle{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 5px;
        }

<body>
    <div class="app">
        <div class="one circle"></div>
        <div class="two circle"></div>
        <div class="three circle"></div>
    </div>
</body>

三、ID选择器
id选择器以"#"开头，后面紧跟id名,不允许有空格,与元素的id属性值保持一致
在一个文档中,id值不能重复,所以这个一般选择唯一元素。

    #one {
      border: 1px solid greenyellow;
    }
    #two {
      border:1px solid royalblue;
    }

<body>
  <div id="app">
    <div class="myDiv" id="one">1</div>
    <div class="myDiv" id="two">2</div>
    <div class="myDiv" id="three">3</div>
  </div>
</body>

四、普遍选择器
使用*来表示普遍选择器表示选择所有元素通常用在组合选择器中。
* {
background-color: honeydew;
}
#app>*{
background-color: honeydew;
}

五、层次选择器
1、后代选择器
" "
#app p 包括子元素，也包括孙子元素，子子孙孙无穷～

2、子代选择器
">" 表示的是直接子元素
#app>p

3、相邻同胞选择器下一个兄弟元素
"+"
.myP+* 选的是class为myP的元素的下一个兄弟元素

4、一般同胞选择器
"~"
.myP~* 选的是class为myP的元素的后面的所有兄弟元素

 <style>
        /* 后代选择器 */
        #app p {
            color: rgb(205, 90, 190);background-color: rgb(16, 17, 17);
        }
        /* 子代选择器 */
        #app>p {
            background-color: rgb(247, 233, 48);
        }
        /* 相邻同胞选择器 */
        .myP+* {
            background-color: rgb(41, 54, 233);
        }
        /* 一般同胞选择器 */
        .myP~* {
            background-color: rgb(248, 8, 8);
        }
</style>

<body>
    <div id="app">
        <div class="myDiv" id="one">1</div>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <div class="myDiv" id="two">2</div>
        <div class="myDiv" id="three">
            <p class="myP">p2-1</p>
            <div>123</div>
            <p class="">p2-2</p>
            <p class="">p2-2</p>
            <p class="">p2-2</p>
            <p>p2-3</p>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
        </div>
</body>

六、多选择器
多个选择器组合使用，用","分割
1、组合选择器
div,p,li,.myDiv,#app {}
2、嵌套选择器
div.myDiv

七、属性选择器
/* 属性选择器 */
[title] {
color: khaki;
}
[title=div2] {
color: khaki;
}

// 属性包含title，属性值以di开头
[title^=di] {
color: khaki;
}

// 属性包含title，属性值以Div结尾
[title$=Div] {
color: khaki;
}

// 属性包含title，属性值包含i(模糊匹配只要有这字符串就行)
[title*=i] {
color: greenyellow;
}

// 属性包含title，属性值中有di(必须是目标字符串)
[title~=di] {
color: greenyellow;
}

八、伪类选择器
1.子代元素相关
以:开头，用于其它选择器之后，指明元素在某种状态下才能被选中
:only-child 独生子元素
:first-child 第一个孩子元素
:last-child 最后一个孩子元素 */
:nth-child(n) 第n个孩子元素 n从1开始
:nth-last-child(n) 倒数第n个孩子元素 n从1开始
:first-of-type 选中app类子代的每种类型的第1个孩子元素
:last-of-type 选中app类子代的每种类型的最后1个孩子元素
:nth-of-type(n) 选中app类子代的每种类型的第n个孩子元素 n从1开始
:nth-last-of-type(n) 选中app类子代的每种类型的倒数第n个孩子元素

2.元素状态相关的
:hover 光标悬浮后改变样式
:link a标签未被访问过的状态
:visited a标签已被访问过的状态
:active 活动时的状态
:focus 聚焦时的状态
:checked 按钮被选中时的状态
:default 默认选中时的状态
:enabled 表单项可用时的状态
:disabled 表单项禁用时的状态
:valid 表单通过验证
:invalid 不通过验证
:required 必填项
:optional 选填项
:in-range 在范围内、
:out-of-range 不在范围内

九、伪元素选择器
"::" 开头用在其它选择器之后
::after 选中之后的不存在的节点，然后结合content添加内容
::before 选中之前的不存在的节点，然后结合content添加内容
::first-letter 选中第一个文本字符
::first-line 选中第一行文本
::selection 选中的文本

Lance2574

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器有哪些

一、标签选择器标签选择器又叫元素选择器，使用元素名可以直接选中相同的元素。<style> p{ color: tomato; } li{ border: 1px solid rgb(252, 249, 76); }</style><body> <div> <p>1</p>
复制链接

扫一扫