CSS选择器

已于 2022-10-04 10:59:55 修改
阅读量790 收藏 3
点赞数 8
文章标签： 前端 css
于 2022-09-28 15:40:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qi_bai_jin/article/details/127033115
版权

目录

CSS简单选择器

通用选择器

元素选择器

分组选择器

id 选择器（常用）

类选择器（常用）

后代选择器

子元素选择器

CSS复杂选择器

相邻兄弟选择器

属性选择器

伪类选择器

伪元素选择器

CSS简单选择器

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

*{
    margin: 0;
    padding: 0;
}

元素选择器

元素选择器根据元素名称来选择 HTML 元素（标签名）

p {   
text-align: center;   
color: red; 
}

分组选择器

用 , 连接，比如：

h1, h2, p {   
    text-align: center;   
    color: red; 
}

注意：为了考虑到浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。这个时候可以通过上述所说的选择器进行初始化css。

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

id 选择器（常用）

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。例子:

<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
#para1 {   
text-align: center;   
color: red; 
}

类选择器（常用）

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，写一个句点（.）字符，后面跟类名。

.center{
    text-align: center;
    color: #000;
}
<div class="center">
    center
</div>

总结一下

选择器例子描述
通用*选取所有元素
元素p选取p元素
分组p,div,span选取<p>,<div>，<span>元素
ID#name选取id="name"的元素
类.name选取clss="name"的元素

后代选择器

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

语法：父类标签+空格+标签名

 .active{
     background-color: pink;
     padding:20px;
}
 .active p {
     background-color: skyblue;
 }
<p>今天你学习了吗</p>
<div class="active">
    <p>学习了吧</p>
    <div>
        <p>学习使我快乐</p>
    </div>
</div>
<p>好像学了</p>
<p>快去学习</p>

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，则使用子元素选择器（Child selector）。

语法: 父类标签 + > +父类第一任儿子

.active{
   background-color: pink;
   padding:20px;
}
.active > p {
   background-color: skyblue;
}
<p>今天你学习了吗</p>
<div class="active">
    <p>学习了吧</p>
    <div>
        <p>学习使我快乐</p>
    </div>
</div>
<p>好像学了</p>
<p>快去学习</p>

后代选择器与子元素选择器的区别：后代可以选择儿子，孙子，乃至曾孙。子元素选择器只能选择儿子。

CSS复杂选择器

相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）

语法 标签名 + + + 与该标签并列的下一个标签。

 .active{
     background-color: pink;
     padding:20px;
}
 .active + p {
     background-color: skyblue;
 }
<p>今天你学习了吗</p>
<div class="active">
    <p>学习了吧</p>
    <div>
        <p>学习使我快乐</p>
    </div>
</div>
<p>好像学了</p>
<p>快去学习</p>

06005a63dc6f49d6be9cd2e60fbb44b4.png

属性选择器

属性选择器通过已经存在的属性名或属性值匹配元素

语法描述
[attr] 表示带有以 attr 命名的属性的元素
[attr=value] 表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr~=value]表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
[attr|=value]表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀
[attr^=value]表示带有以 attr 命名的属性，且属性值是以 “value ”开头的元素。
[attr$=value]表示带有以 attr 命名的属性，且属性值是以 *value *结尾的元素。
[attr*=value]表示带有以 attr 命名的属性，且属性值至少包含一个 *value *值的元素。

a {
  color: blue;
}

/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

/* 包含 "insensitive" 的链接，不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 包含 "cAsE" 的链接，区分大小写 */
a[href*="cAsE" s] {
  color: pink;
}

/* 以 ".org" 结尾的链接 */
a[href$=".org"] {
  color: red;
}
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

伪类选择器

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

语法：元素：动作

例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：

a:hover {
  color: blue;
}
伪类例子描述
：linka:link未访问链接，我们没有点击超链接之前的样式
：visiteda：visited已经访问链接，点击超链接后的样式
：hovera：hover鼠标悬停，鼠标悬停在链接的样式
：activea：active激活链接，点击链接时，鼠标松放间隔时内的样式

更多伪类选择器详看文档

伪元素选择器

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

例如，::first-line是会选择一个元素（下面的情况中是<p>）中的第一个字母

<p>吾日三省吾身，今天你好好学习了吗？今天你好好吃饭了吗？今天你好好睡觉了吗？</p>
p::first-letter {
    font-size:20px;
    color: blue;
}

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后

伪元素例子描述
：：first-letterp::first-letter选择<p>内的第一个字母
::first-linep::first-line选择<p>内的第一行
::beforep::before在<p>开头添加一个子元素
::afterp::after在<p>结尾添加一个子元素
::sectionp<p>中使用鼠标或其他选择设备选中的部分

::befor & ::after

element::before{ 样式 }

element::after{ 样式 }

CSS 中，::before与::after 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

<q>一些引用</q>, 他说，<q>比没有好。</q>.

q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}

注意：必须加上content属性

往往可以用::befor与::after做出很好看的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .shuobo {
            position: absolute;
            top: 220px;
            left: 80px;
            height: 18px;
            width: 18px;
            border-radius: 50%;
            box-sizing: border-box;
            background: #aedafe;
        }
        .shuobo::before,
        .shuobo::after {
            content: "";
            box-sizing: border-box;
            display: block;
            position: absolute;
            border-radius: 50%;
            animation-duration: 0.5s;
            animation-timing-function: ease-out;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
        }
        .shuobo::before {
            left: -62.5%;
            top: -62.5%;
            height: 225%;
            width: 225%;
            animation-name: upstep-first;
            background: rgba(121, 184, 232, 0.5);
            border: 1px solid rgba(72, 148, 254, 0.5);
        }
        .shuobo::after {
            left: -150%;
            top: -150%;
            height: 400%;
            width: 400%;
            background: rgba(121, 184, 232, 0.2);
            border: 1px solid rgba(72, 148, 254, 0.2);
            animation-name: upstep-second;
        }
        @keyframes upstep-first {
        0% {
            opacity: 0
        }
        33% {
            opacity: 0
        }
        34% {
            opacity: 1
        }
        100% {
            opacity: 1
        }
        }
        
        @keyframes upstep-second {
        0% {
            opacity: 0
        }
        66% {
            opacity: 0
        }
        67% {
            opacity: 1
        }
        100% {
            opacity: 1
        }
        }
    </style>
</head>
<body>
    <div class="shuobo"></div>
</body>
</html>

齐白在学习
关注
CSS介绍和通用选择器
weixin_53027472的博客
07-19 608
主要介绍了什么是CSS，以及CSS的引入方式及常用选择器
CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？
热门推荐
Shmily_ox的博客
03-07 5万+
CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！ 一、通配符选择器 通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。 基本语法格式：*{ 属性1：属性值1；属性2：属性值2；} 例子 使用该选择器定义样式，清除所有HTML标记的默认边距。 *{ margin：0； /*定义...
CSS 属性选择器
稚枭天卓
09-19 819
attribute 表示属性，诸如 id、class、role 等，自定义的属性也可以 。 value 表示对应值。 [attribute=value] 选择器用于选择指定了属性和值的元素。 [attribute~=value] 选择器用于选择属性值包含一个指定单词的元素。 [attribute|=value] 选择器用于选择指定属性具有指定值开始的元素。 [attribute^=v
Html/Css_ 拾遗 role属性的作用
迎难而上
03-15 7506
原文地址：http://blog.csdn.net/annip/article/details/53455226 一.什么是role属性 role属性作用是告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这个元素所扮演的角色，主要是供残疾人使用。使用role可以增强文 本的可读性和语义化。 在html5元素内，标签本身就是有语义的，因此
CSS:通用选择器
11-17 1108
通用选择器 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色： * {color:red;}
css通用选择器*
彻底拆分，一切可控！
03-09 2158
如下所示在网页运行的时候，段落字体显示的颜色不是绿色而是红色，因为“*”作为通用的选择器它的优先级是最低的，所以如果有css定义了指定的元素的样式的时候，那么它就会失去对于指定了css样式的元素的样式的控制了。 p { color: red; } * {
css常用选择器
weixin_56233059的博客
09-26 624
文章目录前言常用选择器元素选择器复合选择器交集选择器并集选择器关系选择器几种关系子元素选择器后代选择器兄弟选择器属性选择器伪类元素a类伪元素常见状态伪类常见伪类选择器 前言 选择器：通过选择器可以选中页面的指定元素来增加样式。例如： </style> p{ color: red; font-size: 40px; } h1{ color: pink; } </style> </head>
CSS选择器.pdf
10-09
在CSS选择器的体系中，存在多种不同类型的选择器，每种都有其特定的用途和使用场景。 首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
css常见选择器
爱玩亚索的程序员
03-16 801
文章目录基础选择器元素选择器id选择器class选择器群组选择器包含选择器进阶选择器伪类选择符子选择符兄弟选择符属性选择符结构伪类选择符伪元素选择符 基础选择器 元素选择器 div { width: 500px; height: 300px; background-color: green; border: 10px dashed red; } <div>div1</div> 元素选择符(类型选择符、element选择符) 权重：000
css通用选择器用_一定要赶上他们：通用CSS选择器
cungui5726的博客
08-20 139
css通用选择器用The broadest possible selector that can be used in CSS, the universal or "wildcard" selector is also the most powerful. Used as a single selector, a wildcard sets absolutely everything to th...
css中的选择器（selector）及分类
weixin_51510767的博客
11-29 1109
标记选择器（标签选择器） 每种HTML标签的名称都可以作为相应的标签选择器的名称。 通用选择器 通用选择器是一种特殊的选择器，用符号“*”表示，对所有元素生效。 ID选择器 ID选择器为带有指定id的元素设置样式，允许以一种独立于文档元素的方式来指定样式，所有主流浏览器都支持t。 ID选择器用“#”前缀标识符进行标识，后面紧跟指定元素的id名称。 语法结构如下： 标记名#id名{ 属性1：值1；……} 类选择器 这个与ID选择器相似，不同的是定义时不用“#”而使用“.”，引用时不用id属性而用class属性
初始css（css中的选择器以及css的引入方式）
weixin_33895516的博客
04-29 129
css样式规则： 花括号前面是选择器，花括号里是样式。 如果要控制多个样式的话，每个样式用分号隔开。 一行尽量只写一个样式。 最后一个样式可以不加分号，但是尽量把分号加上。 注意数字1和字母l以及数字0和字母o的区分。 选择器就是要选择的作用对象。css中的选择器有标签选择器，通配选择器，类选择器，id选择器，子代选择器，后代选择器，群组选择器，伪类选择器。下面来详细介绍一下这几种选择器： ...
css中选择器的基本介绍以及使用方法
最新发布
2201_75406597的博客
05-18 642
1.1要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，每一条css样式定义由两部分组成， “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。1.2选择器包括四种基本选择器，包含选择器、属性选择器、伪类选择器、伪元素选择器等。关于css中的各种选择器，首先要清楚各个选择器的语法结构，混合使用各种选择器，然后要根据实际情况择优选择更加方便的选择器，从而提高效率和美观程度。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值