【css基础】选择器合集

是Mary呀～

已于 2023-06-20 13:23:39 修改

阅读量115

点赞数

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

于 2023-06-19 22:48:19 首次发布

本文链接：https://blog.csdn.net/qq_51489068/article/details/131293255

版权

css-html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

id选择器：使用#

类选择器：使用.

标签选择器：使用标签

通配符选择器：使用*

相邻兄弟选择器：使用+

通用兄弟选择器：使用～

交集选择器：不需要空格，不用任何符号

并集选择器：使用，

子代选择器：使用>

后代选择器：使用空格

伪类选择器：

1.序选择器：使用:first-child/:last-child/:nth-child(n)等等

2.动态伪类选择器：使用E:link/E:visited/E:hover/E:active

3.伪元素选择器：使用::after/::before

4.否定伪类选择器：使用:not(xx)

属性选择器：例子：input[type=password]{}

实践！！！

<!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>
        /* id选择器 */
        /* 类选择器 */
        /* 标签选择器 */
        /* 通配符选择器：用*分隔开，给当前界面上所有的标签设置属性 */
        
        /* 通用兄弟选择器：两个标签不相邻，给标签1后面的所有同级标签2设置样式 */
        div ~ p{
            background-color: bisque;
            height: 40px;
        }
        /* 相邻兄弟选择器：两个标签相邻，要改变后一个标签的属性 */
        div + h6{
            background-color: #f19f9f;
        }
    
        /* 子元素选择器：找到标签1后面直接子元素标签2, 然后设置属性*/
        div > p{
            font-weight: 800;
        }
        /*  后代选择器：找到标签1后面的所有标签2的元素，设置属性 */
        div div p{
            color: aqua;
        }

        /* 交集选择器：相交的那部分元素设置属性,例：既要是div也要是calss为a的标签 */
        div.a{
            color: blue;
        }
        /* 并集选择器：合并元素设置属性 */
        .a , .b{
            font-weight: 800;
        }

        /* 伪类选择器：用冒号隔开 */
        /* 
        1.序选择器
          :first-child 			选中同级别中的第一个标签
          :last-child 			 选中同级别中的最后一个标签
          :nth-child(n) 		 选中同级别中的第n个标签
        2.动态伪类选择器
          E:link（链接伪类选择器）：未被点击，常用于链接锚点上
          E:visited（链接伪类选择器 ）：已被点击。常用于链接描点上
          E:hover （用户行为选择器）： 鼠标悬停的样式。IE6及以下浏览器仅支持 a:hover
          E:active（用户行为选择器）：鼠标点击未释放。常用于链接描点和按钮上
        3.伪元素选择器
          （::after）：通过content可以向后的位置添加一些内容
          （::before)：通过content可以向前的位置添加一些内容
            .b::after{
                content: "nice";
            }
        4.否定伪类选择器：剔除掉某些元素
            div:not(.aa){
                border: 1px solid blueviolet;
            }
        */

        /* 
         属性选择器：根据某个元素的属性查找设置样式
          （1）input[type=password]{}//用于区分input标签
          （2）以某某开头  input[type^=password]{}
          （3）以某某结尾  input[type$=password]{}
          （4）属性的取值是否包含某个特定的值
            	[attribute*=value] CSS3
        */
    </style>
</head>
<body>
    <div class="aa">我是第一个div盒子
        <div>11</div>
    </div>
    <div>
        <p>我是第一个p盒子</p>
        <div>
            <p>我是第一个孙子p标签</p>
        </div>
        <div class="a">
            我是div标签
            <p>我是第二个孙子p标签</p>
        </div>
    </div>
    <h6>h标签</h6>
    <p class="b">第一个p标签</p>
    <p>第二个p标签</p>
    <p>第三个p标签</p>
</body>
</html>

效果图：