首页 > 其他分享 >css选择器

css选择器

时间:2024-09-10 08:51:52浏览次数:12  
标签:元素 选择 CSS type 选择器 css 属性

1. 通配符选择器(Universal Selector)

通配符选择器使用星号(*)表示,可以匹配页面上的所有元素。

场景:当需要为页面上所有元素设置统一的样式时

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. 类选择器(Class Selector)

类选择器使用点(.)开头,后面跟上类名,可以为拥有相同类的元素设置样式。

场景:为具有相同样式的多个元素设置样式。

HTML代码

<div class="highlight">这是一段高亮文本。</div>

CSS代码

.highlight {
  background-color: yellow;
}

4. ID选择器(ID Selector)

ID选择器使用井号(#)开头,后面跟上ID名,用于选择具有特定ID的元素。

场景:为页面上唯一的元素设置样式。

HTML代码

<div id="unique">这是唯一的元素。</div>

CSS代码

#unique {
  border: 1px solid red;
}

6. 并集选择器(Grouping Selector)

并集选择器使用逗号分隔多个选择器,为多个元素设置相同的样式。

场景:为多个不同类型的元素设置相同的样式。

CSS代码

h1, h2, h3 {
  color: blue;
}

7. 后代选择器(Child Selector)

后代选择器使用大于号(>)表示,选择某个元素的直接子元素。

场景:选择特定父元素的直接子元素。

CSS代码

#parent > p {
  font-weight: bold;
}

8. 子代选择器(Sub-selector)

子代选择器使用空格分隔,选择某个元素的所有子元素,不论层级。

场景:选择特定父元素的所有子元素。

CSS代码

#parent p {
  margin-left: 20px;
}

9. 兄弟选择器(Adjacent Sibling Selector)

兄弟选择器使用加号(+)表示,选择紧接在另一个元素后的同级元素。

场景:选择紧跟在特定元素后的同级元素。

CSS代码

h2 + p {
  margin-top: 0;
}

10. 属性选择器(Attribute Selector)

属性选择器用于选择具有特定属性或属性值的元素。

场景:根据元素的属性或属性值设置样式。

CSS代码

a[target="_blank"] {
  color: green;
}

11. 伪类选择器(Pseudo-class Selector)

伪类选择器用于选择处于特定状态的元素。

场景:为元素的特定状态设置样式。

CSS代码

a:hover {
  color: red;
}

案例

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS选择器示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="unique" class="highlight">
    <h1>标题一</h1>
    <p>这是一段文本。</p>
    <div>
      <p class="highlight">这是另一段文本。</p>
    </div>
    <ul>
      <li>列表项一</li>
      <li class="highlight">列表项二</li>
      <li>列表项三</li>
    </ul>
  </div>
</body>
</html>

CSS代码(styles.css):

/* 通配符选择器 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 元素选择器 */
body {
  font-family: Arial, sans-serif;
}

/* 类选择器 */
.highlight {
  background-color: yellow;
}

/* ID选择器 */
#unique {
  border: 1px solid red;
  padding: 20px;
}

/* 交集选择器 */
#unique h1 {
  color: blue;
}

/* 并集选择器 */
h1, h2 {
  font-size: 24px;
}

/* 后代选择器 */
#unique > p {
  margin-bottom: 10px;
}

/* 子代选择器 */
#unique p {
  color: #333;
}

/* 兄弟选择器 */
h1 + p {
  font-style: italic;
}

/* 属性选择器 */
a[target="_blank"] {
  text-decoration: underline;
}

/* 伪类选择器 */
a:hover {
  color: red;
}

选择器 示例 示例说明 CSS
.class .intro 选择所有class="intro"的元素 1
#id #firstname 选择所有id="firstname"的元素 1
* * 选择所有元素 2
element p 选择所有

元素

1
element,element div,p 选择所有元素和

元素

1
element.class p.hometown 选择所有 class="hometown" 的

元素

1
element element div p 选择元素内的所有

元素

1
element>element div>p 选择所有父级是 元素的

元素

2
element+element div+p 选择所有紧跟在 元素之后的第一个

元素

2
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 2
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素 2
[attribute|=language] [lang|=en] 选择 lang 属性等于 en,或者以 en- 为开头的所有元素 2
:link a:link 选择所有未访问链接 1
:visited a:visited 选择所有访问过的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标在链接上面时 1
:focus input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter 选择每一个

元素的第一个字母

1
:first-line p:first-line 选择每一个

元素的第一行

1
:first-child p:first-child 指定只有当

元素是其父级的第一个子级的样式。

2
:before p:before 在每个

元素之前插入内容

2
:after p:after 在每个

元素之后插入内容

2
:lang(language) p:lang(it) 选择一个lang属性的起始值="it"的所有

元素

2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素 3
[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3
[attribute**=value*] a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素 3
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素 3
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素 3
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素 3
:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素,从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素,从最后一个子项计数 3
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。 3
:root :root 选择文档的根元素 3
:empty p:empty 选择每个没有任何子级的p元素(包括文本节点) 3
:target #news:target 选择当前活动的#news元素(包含该锚名称的点击的URL) 3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(selector) :not(p) 选择每个并非p元素的元素 3
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3
:out-of-range :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 "readonly"(只读) 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 "required" 属性的元素 3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3
:has :has 允许根据其后代元素来选择一个元素。 3
:is :is 接收任何数量的选择器作为参数,并且返回这些选择器匹配的元素的并集。 3

标签:元素,选择,CSS,type,选择器,css,属性
From: https://www.cnblogs.com/ZWJ7671277/p/18405738

相关文章

  • 纯CSS实现海浪文字效果
    如图所示,这是一个很炫酷的文字波动效果,文字呈现出一个海浪波动的效果,这样的动画效果可以显著加强文案本身的含义。本文将解析如何使用纯CSS实现这个特效,基于这个动图可以分析出实现这个效果的主要功能要点:整体呈现出3D文案效果文案呈现波动状态动画文案有渐变颜色的变化文案......
  • 超30个好用的css动画库合集
    文章目录1.Animate.css2.Hover.css3.CSShake4.AniJS5.Lottie6.Animista-On-DemandCSSAnimationsLibrary7.HoverEffectIdeas8.Mo.js9.Hamburgers10.Loaders.css11.SpinKit12.CSSAnimation.io13.Tuesday14.Typed.js15.WOW.js16.Effeckt.css17.Mag......
  • Web大学生网页作业成品——动漫海贼王介绍网页设计与实现(HTML+CSS)(1个页面)
    ......
  • Web大学生网页作业成品——联想商品商城网页设计与实现(HTML+CSS)(1个页面)
    ......
  • CSS中元素将不再响应鼠标事件(如点击、悬停等)。pointer-events: none;
    按钮点击无效pointer-events:none; 是一种CSS样式规则,用于指定元素在用户与之交互时的行为。当应用了 pointer-events:none; 样式时,元素将不再响应鼠标事件(如点击、悬停等),即使用户点击该元素上的内容,也不会触发任何与该元素相关的事件。主要作用:禁用用户交互:当将 p......
  • CSS3新特性
    CSS3新特性本章目标了解CSS3新特性CSS3概述CSS3是什么CSS代表“CasadingStyleSheets”,就是样式表,是一种替代并为网站添加样式的标记性语言。现在所使用的CSS基本是在1998年推出的CSS2的基础上发展而来的。10年前在internet开始普及的时候,就能够使用样式表对网页进行......
  • 什么是CSS预处理器
    什么是CSS预处理器CSS预处理器简介常见的CSS预处理器示例一:使用变量定义颜色示例二:嵌套规则简化选择器示例三:Mixins实现重用示例四:使用@each循环遍历变量列表示例五:条件语句控制样式实际工作中的使用技巧CSS预处理器是一种脚本语言,它允许我们以编程的方式编写更加干......
  • CSS隐藏元素的几种方法,以及他们之间的区别,opacity/visibility/display/rgba函数对比
    文章目录概要displayvisibilityopacitybackground比对概要在网页设计中,我们经常需要将一个元素隐藏或者显示,而需求不同时,不同的隐藏方式也会带来不同的隐藏效果,我们来看看集中隐藏方式的不同。display浏览器不会生成属性为display:none;的元素。dis......
  • CSS圆角边框
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>盒模型练习</title>&l......
  • 前端css样式优先级问题
    一、常用选择器1.标签选择器(标签名{}),选中对应标签里的内容,例(div{})2.类选择器(.类名{}),选中对应类名的内容,例(.one{})   注:不可以数字开头,一个标签中可有多个类名3.id选择器(#id{}),选中对应id的内容,例(#one{})   注:不可以数字开头,一个标签里只能有一个id属性4.通配符选择器(*{}),......