css3 选择器

已于 2024-04-20 14:34:44 修改
阅读量738 收藏 19
点赞数 19
文章标签： css3 前端 css
于 2024-04-20 10:50:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84341405/article/details/137990084
版权
本文详细介绍了CSS中的基本选择器（如id、类、标签、通配符等）、组合选择器、属性选择器、伪类选择器（如:enabled、:hover等）以及伪元素选择器（如::before、::after等），并展示了链接伪类的用法。这些内容有助于开发者理解和应用CSS进行网页样式设计。
摘要由CSDN通过智能技术生成

文章目录

提示：以下是本篇文章正文内容，下面案例可供参考

一、基本选择器

（1）id选择器
id选择器以“#”开头，HTML所有的标签都支持ID选择器
注意： 一个页面中的id值，不允许重复！

<!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>
        #text{
            font-size: 20px;
            font-weight: bold;
            color: lightblue;
        }
    </style>
</head>
<body>
    <div id="text">hello world</div>
</body>
</html>

（2）类名选择器
类名选择器以“.”开头，类选择器能为相同对象定义不同的样式，为不同的对象定义相同的样式
注意：类名是可以重复的

<!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>
        .text{
            font-size: 20px;
            font-weight: bold;
            color: lightblue;
        }
    </style>
</head>
<body>
    <div class="text">hello world</div>
</body>
</html>

（3）标签名选择器
注意： 不要轻易的让一个独立的标签名选择器存在

<!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>
        div{
            font-size: 20px;
            font-weight: bold;
            color: lightblue;
        }
    </style>
</head>
<body>
    <div>hello world</div>
</body>
</html>

（4）通配符选择器
如果所有的样式效果一样就用通配符选择器，以“*”开头

<!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>
        *{
            font-size: 20px;
            font-weight: bold;
            color: lightblue;
        }
    </style>
</head>
<body>
    <div>hello world</div>
    <span>hello world</span>
</body>
</html>

二、组合选择器

（1）包含选择器
包含选择器通过空格标识符来表示，前面一个选择器表示父节点，而后面的选择器表示子节点。

<!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>
        #text p{
            font-size: 20px;
            font-weight: bold;
            color: lightblue;
        }
    </style>
</head>
<body>
    <div id="text">
        <p>hello world</p>
    </div>
</body>
</html>

（2）子选择器
子选择器以“>”表示，子选择器是指定父元素包含下的子元素。

<!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>
        #text>p{
            font-size: 20px;
            font-weight: bold;
            color: lightblue;
        }
    </style>
</head>
<body>
    <div id="text">
        <p>hello world</p>
    </div>
</body>
</html>

（3）相邻选择器
相邻选择器通过“+”分隔符进行定义，TA指定的元素关系是兄弟关系。
（4）兄弟选择器
兄弟选择器的作用是查找某一个指定元素的后面的所有兄弟结点，以“~”表示。

三、属性选择器

1.属性选择器 [attribute]	[type]	选择所有带有type属性元素

2.[attribute=value]	[type=text]	选择所有type=text的标签

3. [attribute~=value]	[id~=box]	选择所有id值包含'box'的标签
（适用于由空格分隔的属性值）

4. [attribute|=language]	[id|=en]		选择所有id值以'en-'开头的标签
（'-'不是错误，规定必须使用'-'连字符）

5.[attribute^=value] [type^=name] 选择type属性值以name开头的元素

6. [attribute$=value] [type$=name] 选择type属性值以name结尾的元素

7. [attribute*=value] [type*=name] 选择type属性值包含name的元素

四、伪类选择器

  1. :enabled 匹配可以使用的表单控件
:enabled{   
            width: 20px;
            height: 20px;
        }
  1. :disabled 匹配禁用的表单控件
:disabled{
           background-color: red;
       }
  1. :checked 匹配选中的单选或者复选框
:checked{
           width: 20px;
           height: 20px;
       }
  1. :root 匹配页面根元素
:root{
           background-color: #eee;
       }
  1. :nth-child(n) 匹配父元素的第几个子元素 n从1开始
    当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：
    在这里插入图片描述
.list :nth-child(3){
           background-color: purple;
       }
  1. :nth-last-child(n) 匹配父元素的第几个子元素，从最后开始数
.list :nth-last-child(1){
          background-color: lightblue;
      }
  1. :last-child 最后一个子元素
.list li:last-child{
          background-color: pink;
      }

7.:first-child 第一个子元素

.list li:first-child{
          background-color: pink;
      }

8.:nth-of-type 匹配父元素下同类型元素的第几个

.list li:nth-of-type(2){
          background-color: lightgreen;
      }

9.:nth-last-of-type(n) 匹配父元素下同类型元素的第几个 从最后开始数

.list li:nth-last-of-type(2){
          background-color: lightgreen;
      }

10:first-of-type 匹配父元素下同类型的第一个

.list li:first-of-type{
          background-color: lightgreen;
      }

11:last-of-type 匹配父元素下同类型的最后一个

.list li:flast-of-type{
          background-color: lightgreen;
      }

12 :only-child 匹配独生子元素

.box div:only-child{
          background-color: purple;
      }

13 :empty 匹配空元素

.box p:empty{
          width: 100px;
          height: 100px;
          background-color: red;
      }

14 :only-of-type 匹配同类型元素是独生子就行

15 :not(其他的选择) 排除小括号中匹配的元素

五、伪元素选择器

伪元素表示页面中一些特殊的并不真实存在的元素
伪元素选择器是针对CSS3中已经定义好的伪元素使用的选择器。

  1. ::selection 匹配滑选中的文字，只支持设置：background-color color
<!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>
      div::selection{
            background-color: purple;
            color: #fff;
        }
    </style>
</head>
<body>
    <div>中国软件开发者的知识共享与交流平台 。</div>
</body>
</html>
  1. ::first-letter 匹配元素中文本的第一个字符
<!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>
       div::first-letter{
           background-color: purple;
        }
   </style>
</head>
<body>
   <div>中国软件开发者的知识共享与交流平台 。</div>
</body>
</html>
  1. ::first-line 匹配元素中文本的第一行
<!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>
        div::first-line{
           background-color: purple;
        }
   </style>
</head>
<body>
   <div>中国软件开发者的知识共享与交流平台<br>
        软件开发者是推动科技进步的重要力量。</div>
</body>
</html>
  1. ::before 在某个元素的内部最开始添加内容
<!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>
         div::before{
            content: '哈哈';
         }
    </style>
</head>
<body>
    <div>中国软件开发者的知识共享与交流平台</div>
</body>
</html>
  1. ::after 在某个元素的内部最后添加内容
<!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>
         div::after{
            content: '哈哈';
         }
    </style>
</head>
<body>
    <div>中国软件开发者的知识共享与交流平台</div>
</body>
</html>

选择器::after{
content:‘’ /* 此属性不写，此伪元素失效 */
}

1> content:属性后边可以跟那些值：
(1) 字符串，字符串作为伪元素的内容添加到主元素中
注意：字符串中若有html字符串，添加到主元素后不会进行html转义，也不会转化为真正的html内容显示，而是会原样输出
(2) attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值
(3) url(), 引用外部资源，例如图片；
(4) counter(), 调用计数器，可以不使用列表元素实现序号问题

六、链接伪类

  1. :link 匹配有链接(href)属性的标签
    经常利用 a:link 选择器将a标签的默认样式进行修改
  2. :visited 匹配被访问过的带连接属性的标签
    经常利用 a:visited 选择器将被访问过的a标签的默认样式进行修改
  3. :hover 匹配鼠标经过的标签
    经常利用 选择器:hover 去完成鼠标经过这个标签时的样式改变动作
  4. :active 匹配激活的元素
    经常利用 :active 去完成一个标签点击时候的激活状态
    经常会用他去做按钮的激活样式
  5. :focus 匹配获得焦点的元素(表单控件)
    经常用来匹配获得焦点的表单控件，然后对表单控件的选中样式做出调整
.YoIo
关注
css3选择器
mangxxi的博客
09-13 2279
一、属性选择器 1.E[att^=value]属性选择器 E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。 2.E[att=value]属性选择器E[att=value]属性选择器 E[att=value]属性选择器E[att=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=
让IE可以变相支持CSS3选择器
12-10
- **cssQuery**：由Dean Edwards开发的JavaScript库，全面支持CSS选择器，包括CSS3，提供了独立的CSS1、CSS2、CSS3和全集版本。通过cssQuery，可以在IE中动态添加样式名以模拟CSS3选择器的效果。 示例代码： ```...
选择器之id选择器
weixin_42900834的博客
01-29 1万+
id选择器可以为标有特定id的HTML元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义 （1）代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam..
ID选择器（CSS选择器）
dongbo2355的博客
08-24 3839
ID选择器以井号为前缀，后面为ID名称。 在标签中中定义id属性，然后在里面设置的属性值就是ID名称。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" ty...
css id 选择器介绍
Lafayette123的博客
06-09 503
以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。但要注意，在同一个页面中，是不允许出现两个相同的id的.id名前必须加上前缀“#”否则无法生效 <DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #lvye{co...
ID选择器
qq_45683093的博客
10-23 1500
```javascript <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jss/jquery-1.11.1.min.js"></script> <title>ID选择器</title> </...
基础选择器之id选择器
weixin_47481102的博客
04-13 7506
id选择器可以为标有特定id的HTML元素指定特定样式。 HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。 #id名{ 属性1：属性值1； .... } 例如，将id为Nav元素中的内容设置为红色。 #nav { color：red； } 注意：id属性只能在每个HTML文档中出现一次。 每个标签都有一个属性叫id. 在同一界面中id名称是不可以重复的。 编写id选择器时，一定要在id前加上#。 id名称只能由字母，数字，下划线组成。[
CSS3选择器大全
热门推荐
Shadow_Weirdo
08-16 3万+
1.CSS3选择器 属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 input[type=&quot;text&quot;] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana...
CSS3选择器（详细！全！）
FishC的博客
11-17 8725
CSS3选择器（详细！全！）
CSS3 选择器 属性选择器介绍
12-13
从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种： E[attr]：只使用属性名，但没有确定任何属性值； E[attr="value"]：指定属性名，并指定了该属性的属性值； E[attr~="value"]...
CSS3 选择器 基本选择器介绍
12-13
那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就...
详解CSS3选择器的使用方法汇总
12-13
一 通用选择器1 *{}通配选择符(CSS2)：适合所有...CSS3新增的通用选择器：同级元素通用选择器：1 通用选择器E~F{}：匹配的是E元素之后的同级F元素匹配E后边所有的F，EF同级。只要F在E的后边，E只是作为一个参考。E~
CSS3_3D变换（七）
最新发布
。
11-10 594
介绍CSS3中3D变换的概念与具体应用。
导航栏及下拉菜单的实现
2301_77699763的博客
11-07 191
主要有导航栏及下拉菜单组成。
巨好看的登录注册界面源码
bjzhang75的博客
10-31 4173
巨好看的登录注册界面源码
导航栏小案例
m0_74725366的博客
11-03 460
实现类似于这样的效果。
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
amoureux555的博客
11-07 298
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
CSS3_2D变换（六）
。
11-07 524
介绍CSS3 2D变换属性和使用方法。
【C知道】CSS3重要特性。
windy1a的博客
11-09 758
CSS3则着重于样式设计的提升，拥有动画效果（@keyframes）、响应式布局（media queries）、新选择器（如:nth-child()）以及更丰富的边框和背景样式。JavaScript，作为网页脚本语言，可以与HTML5的DOM（Document Object Model） API紧密协作，通过操作DOM来触发样式变化，创建交互式的表单、游戏和其他动态行为。两者共同作用，使得现代网站不仅能展示静态内容，还能提供丰富的用户交互体验，提升了用户体验的同时也增强了网页的可用性。
CSS3选择器详解与实例
"这篇内容主要介绍了CSS3选择器的基本概念和使用方法，包括基本选择器、多元素的组合选择器以及CSS2.1属性选择器。" 在网页设计和开发中，CSS（层叠样式表）是用于控制网页元素样式的重要工具。CSS3选择器的引入，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值