css选择器

小姚要加油！

已于 2023-05-15 11:01:12 修改

阅读量39

点赞数

文章标签： css html 前端

于 2023-05-15 10:55:47 首次发布

本文链接：https://blog.csdn.net/qq_74430033/article/details/130673689

版权

文章详细介绍了CSS选择器的种类和用法，包括简单选择器（如标签、ID、类和通配符选择器）、包含选择器（子代、后代和分组选择器）、属性选择器以及伪类和伪元素选择器。这些选择器用于精准定位和应用样式到HTML元素，是网页设计和开发中的基础工具。

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

css选择器用于“查找”或者“选取”要设置样式的HTML元素

大致分为简单选择器、包含选择器、伪类选择器、伪元素选择器、属性选择器！

简单选择器

标签选择器
id选择器
类选择器
通配符选择器

标签选择器的结构：标签名{css属性名：属性值}

要注意标签选择器是一类标签而不是单独一个；而且层叠嵌套也是能找到对应得标签

id选择器的结构：#id的属性值{css属性名：属性值}

注意：一个页面中id属性值不可重复，一个标签上只有一个id属性值，id选择器只能选择一个

类选择器的结构：.class属性值{css属性名：属性名}

通配符选择器的结构：*{css属性名：属性值}

注：优先级 id选择器>类选择器>标签选择器>通配符选择器

包含选择器

子代选择器（取某个标签的第一级标签）
后代选择器（取某个标签的所有子标签）
分组选择器（取多个标签，之间用逗号隔开）

例如：

 <title>包含选择器</title>
    <style>
        /*子代选择器*/
        .list>ul{
            border: 1px solid rebeccapurple;
        }
         /*后代选择器*/
         .list li{
            border: 2px solid blanchedalmond;
         }
          /*分组选择器*/
          #good,.no,h1{
            color: blue;
          }
    </style>
</head>
<body>
    <h1>一个标签</h1>
    <p id="good">下一个标签</p>
    <div class="no">再下一个标签</div>
    <div class="list">
        <ul>
            <li>一、子标签</li>
            <li>二、子标签</li>
            <li>三、子标签</li>
            <li>四、子标签</li>
        </ul><!--此页面一级标签-->
        <li>五、子标签</li>
        <li>六、子标签</li>
    </div>

属性选择器

语法	用法
[属性]	选中某个标签中存在的某个值
[属性=属性值]	选中含有指定属性和指定属性值的元素
[属性*=属性值]	选中指定属性名和含有指定属性值的元素
[属性^=属性值]	选中含有指定属性和指定属性值开头的元素
[属性$=属性值]	选中含有指定属性和指定属性值结尾的元素

例如：

 <title>属性选择器</title>
    <style>
        /*选中某个标签中存在的某个值*/
        .container[class]{
            color: brown;
        }
        div[title]{
            color: blueviolet;
        }
        /*确切等于某个值*/
        input[type="text"]{
            background: blue;
        }
        /*属性里面包含某个值*/
        input[type*="e"]{
            background: green;
        }
        /*属性中的值以xxx开始*/
        input[type ^="u"]{
            background-color: aqua;
        }
        /*属性中的值以xxx结尾*/
        input[type $="on"]{
            background-color: palevioletred;
        }
        /*表示下一个标签*/
        .msg+p{
            color: coral;
        }
        /*属性等于某个值*/
        [title="标题"]{
            color: deeppink;
        }
    </style>
</head>
<body>
    <div class="container">div容器</div>
    <div title="标题">div</div>
    <input type="text" value="张三">
    <input type="email" value="王五">
    <input type="url" value="李四">
    <input type="button" value="王麻子">
    <hr>
    <div class="msg">一个标签</div>
    <p id="msg2">再一个标签</p>
</body>

伪类选择器

伪类是一种不存在的类，伪类用来表示元素的一种状态。同一个标签在不同状态下有不同的样式，伪类是通过冒号表示。

伪类主要用来添加a标签在不同状态下的不同样式：

link	表示超链接点击之前
visited	表示超链接被访客后
hover	表示鼠标放在超链接上悬停的时候
active	表示超链接要激活但鼠标点击标签没松手的时候

注意：a标签的4种状态顺序是一定的，不能更改。a:link a:visited a:hover a:active

例如：

<title>伪类选择器</title>
    <style>
        /*超链接点击之前是红色*/
        a:link{
            color: red;
        }
       /*超链接点击之后是橙色*/
        a:visited{
            color: orange;
        }
        /*鼠标悬停的时候是绿色*/
        a:hover{
            color: green;
        }
        /*超链接要被激活的时候是蓝色*/
        a:active{
            color: blue;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">点击</a>
</body>

伪元素选择器

常见的伪元素：

：：before 元素开始前的位置前

：：after 元素结束后的位置后

：：first-letter 表示第一个字母

：：first-line 表示第一行

：：selection 表示选中的元素

注意：before和after 必须配合contend连用，因为before和after所写的内容无法选中而且永远都是在最前或者最后。

例如：

<title>伪元素选择器</title>
    <style>
        p{
            color: blueviolet;
            font-size: 20px;
        }
        p::before{
            content: "里斯说";
            color: brown;
        }
    </style>
</head>
<body>
    <p>你是最棒的！</p>

注：content：“” 引号里也可以为空

选择器{

属性：属性值；

}

一些常用的选择器属性：

设置字体大小/字号	font-size:npx;(n取整数)
设置字的颜色	color：颜色表示法;(有三种形式)
设置字的字体	font-family："字体名称";（word里的字体名称）
设置字的行高	line-height：n% sem；(n取整数，s可取小数)
设置字的粗细	font-weight ：取值；（取值=normal[正常默认值]=blod/bloder[粗体/更粗])
设置文本缩进	text-indent：nem;(n可取正负)
设置文本对齐方式	text-align:值；（值=center/left/right）
设置文本内容的大小写	text-transform：值；（值=none[正常大小写]/capitalize[每个单词首字母大写]/uppercase[转换成大写]/lowercase[转换成小写]）
……	……