CSS选择器总结

不会敲代码的洋

已于 2024-01-27 21:20:01 修改

阅读量184

点赞数 2

文章标签： css html 前端

于 2023-05-18 12:09:18 首次发布

本文链接：https://blog.csdn.net/qq_74397635/article/details/130701976

版权

一、选择器的基本概念

功能：为选中的元素，设置属性

分类：

基本选择器
包含选择器
属性选择器
伪类选择器
伪元素选择器

二、基本选择器

ID选择器

语法格式：#id {}
id 选择器的值和 html 中某个元素的 id 值相同

id是唯一的，不能被多个标签使用

<style>
    #one{
        background-color: cadetblue;
        font-size: 17px;
        color: darkmagenta;
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <div id="one">这是一个div</div>
    <div>这是一个全新的div</div>
</body>

类选择器

语法格式：.类名 {}
不要使用纯数字, 或者中文, 以及标签名来命名类名.
能差异化表示同一个标签，只需要定义两个不同的选择器

通过获取标签里面的class属性来设置对应的样式

<style>
    .one{
        color: pink;
        font-size: 20px;
    }

    .two{
        color: blueviolet;
        font-size: 20px;
    }
</style>
<body>
    <p class="one">杨花落尽子规啼</p>
    <p class="two">倾尽绿蚁花尽开</p>
    <p>吾生梦幻间，何事绁尘事</p>
</body>

标签选择器

语法格式：标签名字{}
根据标签的名字设置对应的样式，所以选择器的名字就是html标签

<style>
    p{
        font-size: 16px;
        color: blueviolet;
        font-weight: bold;
    }
</style>
<body>
    <p>今天周一</p>
    <p>今天周二</p>
    <p>今天周三</p>
    <div>今天周四</div>
    <div>今天周五</div>
</body>

通配符选择器

语法格式：*{}
通过 * 设置对应的样式

<style>
    *{
        color: red;
        width: 200px;
        height: 100px;
        background-color:blueviolet;
    }
</style>
<body>
    <div>这是一个div</div>
    <div>这是一个全新的div</div>
</body>

基本选择器的优先级

在同时使用一个选择器时：
ID选择器>类选择器>标签选择器>通配符选择器

html表单中css基本选择器的总结

三、包含选择器

子代选择器

语法格式：元素1>元素2 {}
获取某一个标签的第一级子标签

使用大于符号分割

<style>
    .one > a{
        color:crimson;
        font-size: 20px;
    }
</style>
<body>
    <ul class="one">
        <a href="#">这是一个行路难</a>
        <li>金樽清酒</li>
        <li>玉盘珍馐</li>
        <li><a href="#">点我</a></li>
    </ul>
</body>

后代选择器

语法格式：元素1 元素2 {}
获取某个标签的所有子标签
元素1和元素2要使用空格分割

元素1是父级,元素2是子级, 只选元素2 , 不影响元素1

<style>
    ul li{
        color: bule;
        font-size: 20px;
    }
</style>
<body>
    <ul>
        <li>李白</li>
        <li>杜甫</li>
        <li>王维</li>
    </ul>

    <ol>
        <li>李清照</li>
        <li>李绅</li>
        <li>陶渊明</li>
    </ol>
</body>

分组（并集、逗号）选择器

语法格式：元素1，元素2 {}
通过逗号分割等多个元素
表示同时选中元素1和元素2
任何基础选择器都可以使用并集选择器.

最后一个选择器不能加逗号

  <style>
            #one,.box,h1,.two{
                color:aqua;
            }
    </style>
<body>
    <h1>这就是坤坤</h1>
    <div>这是一个div</div>
    <p id="one">哎哟你嘎嫫</p>
    <p class="two">全名制作人</p>
 <div class="box">闻道龙标过五溪</div>
</body>

四、属性选择器

选中某个标签中存在的某个值

div[title]{
color:aquamarine;
}

确切的等于某个值

input[type="text"]{
background:bule;
}

属性里面包含某个值

input[type*="e"]{
background:blue;
}

属性中的值以XXX开始

input[type^="e"]{
background-color:pink;
}

属性中的值以XXX结尾

input[type$="rl"]{
background-color:rgb(14,126,18);
}

表示下一个标签

.msg+p{
color:darkgoldenrod;
}

属性等于某个值

[title="这是一个标题"]{
color:chartreuse;
}

<body>
<div class="container">这是一个div标签</div>
<div title="这是一个标题">这是一个全新div</div>
<input type="text" value="朱门酒肉臭">
<input type="email" value="路有冻死骨">
<input type="url" value="陆游">
<hr>
<div class="msg">柳暗花明</div>
<p id="msg2">又一村</p>
</body>

五、伪类选择器

伪类概念及侧重点

伪类：同一个标签，在不同的状态下，有不同的样式
伪类通过冒号表示
最早的时候主要是用来渲染a标签不同的状态下的不同的样式
注意：对于a标签的四种状态的顺序是一定的，a:link a:visited a:hover a:active

静态伪类: 只能用于超链接的样式

link超链接点击之前
visited 链接被访问过之后

动态伪类：针对所有标签都适用的样式

hover “悬停”：鼠标放到标签上的时候
active “激活”：鼠标点击标签，但是不松手时

<style>
a:link{
  color:red
}
/*超链接点击前*/
a:visited{
  color:rgb(127, 255, 180)
}
/*超链接点击后*/
a:hover{
  color:rgb(255, 174, 127)
}
/*鼠标悬停时*/
a:active{
  color:rgb(255, 127, 223)
}
/*超链接被激活时*/
</style>
<body>
<a href="https://blog.csdn.net/qq_74397635?spm=1000.2115.3001.5343">我的博客</a>
</body>

六、伪元素选择器

在使用before和after的时候一定给要写上content属性
:before-----css2中，::before-----css3中，::before表示元素的开始
:after-----css2中，::after-----css3中，::after表示元素的最后

其他常用伪元素选择器

::first-letter	::first-letter表示第一个字母，例如：p::first-letter{}
::first-line	::first-line表示第一行（第一行内容根据屏幕大小来决定显示多少字），例如： p::first-line{}
::selection	::selection表示选中的内容

<style>
p::before{
  content: "哎哟";
  color:blue
}
p::after{
  content:"你干什么呢";
  color:crimson
}
</style>

<body>
<p>我的好大儿</p>
</boddy>

不会敲代码的洋

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器总结

Html中的属性选择器
复制链接

扫一扫

CSS选择器总结

一、选择器的基本概念

二、基本选择器

ID选择器

类选择器

标签选择器

通配符选择器

基本选择器的优先级

三、包含选择器

子代选择器

后代选择器

分组（并集、逗号）选择器

四、属性选择器

五、伪类选择器

伪类概念及侧重点

静态伪类: 只能用于超链接的样式

动态伪类：针对所有标签都适用的样式

六、伪元素选择器

其他常用伪元素选择器

“相关推荐”对你有帮助么？