4.CSS选择器

最新推荐文章于 2023-07-10 19:58:00 发布
最新推荐文章于 2023-07-10 19:58:00 发布
阅读量190 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mahaiwuji/article/details/104642096
版权

目录

1.CSS基础选择器

1）通配符选择器

2）标签选择器

3）类选择器

4）多类名选择器

5）id选择器

6）选择器的优先级

2.CSS复合选择器

1）交集选择器

2）并集选择器

3）子元素选择器

4）后代选择器

5）伪类选择器

1.CSS基础选择器

1）通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 28px;
        }
        div {
            color: red;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>码海无际</div>
    <span>码海无际</span>
</body>
</html>

2）标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: pink;
        }
    </style>
</head>
<body>
    <div>码海无际</div>
</body>
</html>

 

3）类选择器

  1. 不要纯数字、中文等命名，尽量使用英文字母来表示。

  2. 长名称或词组可以使用中横线来为选择器命名。

  3. 不建议使用“_”下划线来命名CSS选择器。

  4. 类选择器使用“.”（英文点号）进行标识，后面紧跟类名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color-blue{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="color-blue">码海无际</div>
    <span class="color-blue">志向高远</span>
</body>
</html>

 

4）多类名选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color-blue{
            color: blue;
        }
        .font-size28{
            font-size: 28px;
        }
    </style>
</head>
<body>
    <div class="color-blue font-size28">码海无际</div>
    <span class="color-blue">志向高远</span>
</body>
</html>

 

5）id选择器

  1. 用法基本和类选择器相同。

  2. id选择器使用“#”进行标识，后面紧跟id名。

  3. 该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

id选择器和类选择器区别：

  1. W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

  2. 类选择器(class)，好比人的名字，是可以多次重复使用的，比如：张伟、老王。

  3. id选择器，好比人的身份证号码，全中国是唯一的，不得重复，只能使用一次。

  4. id选择器和类选择器最大的不同在于使用次数上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #color-blue {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="color-blue">码海无际</div>
</body>
</html>

 

6）选择器的优先级

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            color: pink;
        }
        div {
            color: red;
        }
        div {
            color: blue;
        }
        .color-green {
            color: green;
        }
        #color-blueviolet {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="color-green" id="color-blueviolet">码海无际</div>
</body>
</html>

 

2.CSS复合选择器

1）交集选择器

  1. 交集选择器由两个或两个以上选择器构成。

  2. 选择器之间没有任何的连接符号，选择器之间没有固定顺序。

  3. 选择器可以是：标签选择器、类选择器、id选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.color-blue {
            color: blue;
        }
        div#color-red.color-red{
            color: red;
        }
    </style>
</head>
<body>
    <div class="color-blue">码海无际</div>
    <span class="color-blue">码海无际</span>
    <hr>
    <div class="color-red" id="color-red">码海无际</div>
</body>
</html>

 

2）并集选择器

  1. 交集选择器由两个或两个以上选择器构成。

  2. 选择器之间通过英文逗号连接，选择器之间没有固定顺序。

  3. 选择器可以是：标签选择器、类选择器、id选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*span {*/
        /*    color: blue;*/
        /*    font-size: 28px;*/
        /*}*/

        /*div {*/
        /*    color: blue;*/
        /*    font-size: 28px;*/
        /*}*/
        /*俩种写法一样*/
        span, div {
            color: blue;
            font-size: 28px;
        }
    </style>
</head>
<body>
    <div>码海无际</div>
    <span>码海无际</span>
</body>
</html>

 

3）子元素选择器

  1. 子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

  2. 这里的子，指的是亲儿子，不包含孙子、重孙子之类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div > .color-pink > span{
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        <div class="color-pink">
            <span>码海无际</span><!--有效果-->
        </div>
        <div>
            <span>码海无际</span><!--无效果-->
        </div>
        <span>
            <div class="color-pink">
               <span>码海无际</span><!--无效果-->
            </div>
        </span>
    </div>
</body>
</html>

 

4）后代选择器

  1. 后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

  2. 包含孙子、重孙子之类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div h1{
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <h1>码海无际</h1>
        <span>
            <h1>码海无际</h1>
        </span>
    </div>
</body>
</html>

 

5）伪类选择器

  1. 伪类选择器用于向某些选择器添加特殊的效果。

  2. 伪类对象要配合content属性一起使用。

  3. 一个冒号是css2的写法，两个冒号是css3的写法，表达的意思一样。

  4. 冒号的前面和后面都不允许有空格。

选择器示例示例说明
:checkedinput:checked选择所有选中的表单元素
:disabledinput:disabled选择所有禁用的表单元素
:emptyp:empty选择所有没有子元素的p元素
:enabledinput:enabled选择所有启用的表单元素
:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素
:in-rangeinput:in-range选择元素指定范围内的值
:invalidinput:invalid选择所有无效的元素
:last-childp:last-child选择所有p元素的最后一个子元素
:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素
:not(selector):not(p)选择所有p以外的元素
:nth-child(n)p:nth-child(2)选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素
:only-childp:only-child选择所有仅有一个子元素的p元素
:optionalinput:optional选择没有"required"的元素属性
:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性
:read-onlyinput:read-only选择只读属性的元素属性
:read-writeinput:read-write选择没有只读属性的元素属性
:requiredinput:required选择有"required"属性指定的元素属性
:rootroot选择文档的根元素
:target#news:target选择当前活动#news元素(点击URL包含锚的名字)
:validinput:valid选择所有有效值的属性
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个p元素的第一个字母
:first-linep:first-line选择每个p元素的第一行
:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 p 元素
:beforep:before在每个p元素之前插入内容
:afterp:after在每个p元素之后插入内容
:lang(language)p:lang(it)为p元素的lang属性选择一个开始值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:visited{
            color: red;
        }
        p:before{
            content:"P前面";
            color: red;
        }
        p:after{
            content:"P后面";
            color: red;
        }
    </style>
</head>
<body>
    <a href="https://www.taobao.com">淘宝</a>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.taobaoaa.com">淘宝aa</a>
    <a href="https://www.taobaoaaa.com">淘宝aaa</a>
    <hr>
    <p>P元素</p>
</body>
</html>

 

码海无际
关注
专栏目录
CSS 中的 属性选择器
CyberPlayer的博客
02-23 1956
css属性选择器的作用是：为带有特定属性的 HTML 元素设置样式 CSS [attribute] 选择器 [attribute] 选择器用于选取带有指定属性的元素。 下例选择所有带有 target 属性的 <a> 元素； a[target] { background-color: yellow; } CSS [attribute="value"] 选择器 [attribute="value"] 选择器用于选取带有指定属性和值的元素。 下例选取所有带有 targe
css选择器符号,css 选择器符号
weixin_28756281的博客
08-03 1592
1. 空格 —— “后代选择器”例如下面这个例子，表示div元素里面所有的p元素div p {...}2. > —— “子选择器”例如下面这个例子，表示div元素里面所有的子代(不含孙代及以后)p元素div>p {...}3. ~ —— “兄弟元素选择器”例如下面这个例子，表示.cls元素往后的同级的p元素.cls~p {...}4. + —— "相邻兄弟选择器"例如下面这个例子，表示...
4.CSS基础_选择器1
安小静--
10-16 90
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。 CSS的选择器分为两大类：基本选择题和扩展选择器。 基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议使用） 1、标签选择器：选择器的名字代表html页面上的标签 标签选择器，选择的是页面上所...
CSS的通配选择器
歪脖先生的博客
12-02 1万+
通配选择器 通配选择器用一个星号（*）表示。单独使用时，这个选择器可以与文档中的任何元素匹配，就像一个通配符。如，让页面上的所有文本都为黑色： * { color: black; } 当然也可以选择某个元素下的所有元素。在与其他选择器结合使用时，通配选择器可以对特定元素的所有后代应用样式。如，以下代码为 .demo 元素的所有后代，添加一个灰色背景： .demo * { backg
css选择器有哪些？
weixin_47450807的博客
04-04 1万+
一、写在前面 css选择器有很多，但是常用到的也就几个，今天总结一下。 二、具体选择器 2.1、id选择器 #myId {} 2.2、类选择器 .myClass {} 2.3、标签选择器 p,h1 {} 2.4、后代选择器 div h1 {} 2.5、子选择器 div>h1 {} 2.6、兄弟选择器(所有的兄弟) ul~h1 {} 2.7、相邻兄弟选择器 ul+h1 {} 2.8、属性选择器 li[name='sss'] {} 2.9、伪类选择器 h1:hover {} 2.10 h
CSS选择器分类大全
m0_67859656的博客
11-05 6384
CSS选择器分类大全 基础选择器 一、基础选择器 二、复合选择器 三、CSS3选择器补充： （一）层级选择器： （二）属性选择器 （三）伪类选择器
前端必知：11.css选择器的使用以及选择器的优先级
qq_52799985的博客
07-10 2644
E m { css内容 } 通过E选择器 设置 E中的 m 选择器 的css内容，m可以是E的。E>M {css内容} 通过E选择器找到 E选择器的子级M选择器，设置css内容。E~M{css内容}通过E选择器找到 该元素之后所有选择器名为M的兄弟元素，并。a的伪类，伪类是css系统创建好的内部的类，用来对标签的某个时机设置样式。如果多种选择器所表达的css内容是相同的，则可以把他们写成群组选择器。假设后面的数字是权重的值，那么在比较的时候，只需把选择器的值。子级，也可以是E的后代中的某一个选择器。
CSS常见选择器
wyt20040310的博客
10-10 2650
例子：h1{},h2{},p{},div{},span{}[属性名=属性值]{} 选择含有指定属性和属性值的元素。[属性名^=属性值]{} 选择属性值以指定值开头的元素。[属性名$=属性值]{} 选择属性值以指定值结尾的元素。-比如：第一个元素，被点击的元素，鼠标移入的元素···[属性名*=属性值]{} 选择属性值含有某值的元素。语法：选择器1,选择器2,选择器3····{}语法：[属性名]{} 选择含有指定属性的元素。例子：#p1{},#pp{},#abc{}语法：选择器1选择器2选择器3····{}
css的父选择器
热门推荐
Cribug8080的博客
05-22 4万+
css的父选择器 首先声明一点，目前没有css的父选择器。新出的css3也没有。但是已经有很多人有很多次提案了。 反向选择 在2008年Shaun Inman建议这种父选择器。 a < img{ border: none; } 这段css的目的是选择img元素的a标签。 parent Remy Sharp建议使用:parent a img:parent { background: ...
CSS选择器大全
认真学习前端的博客
03-08 2092
CSS选择器中的通用 ID class 标签 属性以及交集 并集选择器，伪类，伪元素选择器等等 还有选择器的优先级权值等内容
1.css选择器-属性选择器.html
06-26
1.css选择器-属性选择器.html
main.css 主页面选择器，仅供参考，学习使用
08-02
css选择器 main.css 主页面选择器，仅供参考，学习使用
基于龙伯格（Luenberger）观测器的无感FOC电机矢量控制MATLAB Simulink仿真模型
10-06
基于龙伯格（Luenberger）观测器的无感FOC电机矢量控制MATLAB Simulink仿真模型 通过龙伯格观测器，我们可以在不直接测量转子角度的情况下，通过已知的电机电流、电压来估算转子角度。这种方法在控制理论和实际电机控制中具有广泛的应用，尤其是在无传感器的情况下。
web端实现《别踩白块》小游戏
10-06
通过JS实现web的《别踩白块》小游戏
python经典实例代码汇总+100例
最新发布
10-06
python经典实例代码汇总+100例
阵列天线泰勒综合法降低副瓣电平的matlab源代码
10-06
clear clc % 参数设置 Freq =30*(1e9); %频率 v_0=3*10^8;%光速 lamda = v_0/Freq ; % 波长 d = lamda * 0.6; % d为阵元间距 theta0 = (90/180)*pi; % 扫描角度 theta = 0: 0.01 : pi; % Θ为方向角 u = pi*d*(cos(theta)-cos(theta0))/lamda; %T = Chebyshev; % T为切比雪夫恒等式系数矩阵 N = 16; % N为直线阵的阵元数量，M为一侧的单元数(对称) R0dB = 20; % R0dB为副瓣电平 nbar=9; %相等电平副瓣数目 if (mod(N,2)==0) M = N / 2; parity = 0; % parity为奇偶性，0为偶数
Delphi 开发资源汇总及组件介绍
10-06
内容概要：本文档提供了一个归档快照，展示了一个精心策划的Delphi优秀框架、库与各种资源列表。其中包括大量通用库如JCL、JVCL、Spring4D以及Alcinoe等，针对多媒体（如音频视频）、网络通信工具集（如Indy、Synapse）以及界面控制包等多个模块的具体介绍。另外还涉及到脚本引擎（如DWScript）、内存管理、日志记录、加密解密技术等多项实用性组件及实用工具。此外它还有针对性地罗列了关于数据库连接库（例如ZeosLib、mORMot），单元测试库（像DUnitX，DUnit2等），以及各类IDE插件增强工具的细节描述。 适合人群：Delphi程序员及其开发者。 使用场景及目标：作为查找和选择适用于不同软件项目的Delphi第三方库、组件及其他辅助工具的参考书，为Delphi开发人员提高工作效率和扩展程序功能提供了有力的支持。 其他说明：该资料侧重于开源项目，且对已过时多年的旧工程保持较低的关注度。所有的进展和改进都会在其活跃维护的新版本Awesome-Pascal清单上进行。
. css中有哪些选择器
05-27
CSS中有很多种选择器，包括： 1. 元素选择器（element selector）：根据元素的名称选择元素，如p、h1、a等。 2. 类选择器（class selector）：根据元素的class属性选择元素，如.class1、.class2等。 3. ID选择器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值