浅谈css几种常用的选择器

el/2023/6/4 16:12:53

首先我们得了解,什么是选择器?

     每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素.要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

下面我们来谈谈css一些常用的选择器

1 : 通配符选择器

通配符选择器用星号(*)来表示,例如: 

*{font-size : 12px;
}

表示所有的元素的字体大小都是12px;

2 : 分组选择器

当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。例如:

p, li {line-height:20px;color:#c00;}#main p, #sider span {color:#000;line-height:26px;}

使用分组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并分组进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。

3 : 标签选择器

一个完整的HTML页面是有很多不同的标签组成,而 标签选择器,则是决定哪些标签采用相应的CSS样式,例如:

p{ color: red; 
}

这段代码会让所有的p标签都变成红色

4 : 类选择器

类选择器以class属性中有指定类名的任何元素为目标,类选择器以一个"."符号开头例如:

.info { color:black; 
}

这样会让所有类名为info的类的元素颜色都变为黑色

5 : ID选择器

ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式;ID选择符以一个“#”符号开头。例如:

#demoDiv{color:#000;}

这里代表id为demoDiv的元素的设置它的字体颜色为黑色。

6 : 伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式,比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。例如:

a:link{color:green ;font-size: 50px
}a:hover{color:pink;font-size: 50px
}a:active{color:yellow;font-size: 50px
}a:visited{color:red;font-size: 50px
}

效果:
打开网页时标签为绿色 
将鼠标放在标签上时标签为粉色 
点击标签是标签为黄色 
点击后标签为红色.

7 : 后代选择器

 后代选择器用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。后代选择器中的元素不仅仅只能有两个,对于多层祖先后代关系,可以有多个空格加以分开,如id为a、b、c的三个元素,则后代选择器可以写成#a #b #c{}的形式,只要对祖先元素的选择在后代元素之前、中间以空格分开即可。例如:

#people em{ color: red; 
}

这一规则把ID值为“people”的元素中包含任何em元素的颜色设置为红色。

8 : 组合选择器

可以把两种或者多种类型的选择符组合式使用;例如:

p.info { color:blue; 
}

它只选择属于info类的段落,属于该类的别种元素和不属于info类的其他段落将被忽略。

9 : 属性选择器

格式:基本选择器[属性 = ‘属性值’]{ },也可以只写属性,例如:

<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">input[type = 'text'] {background-color: red}input[type = 'password'] {background-color: pink}
</style>
</head>
<body><form>name:<input type = "text"><br/>pass:<input type = "password"></form></body>
</html>

运行结果: 
这里写图片描述

选择器优先级大小:

!important > 行间样式>ID选择器 > 类|属性 选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

当有一些复杂选择器不能通过优先级的大小比出,那么我们就要用到权重进行计算

css选择器权重计算:

!important                                无穷大

行间样式                                    1000

ID选择器                                      100

类|属性|伪类 选择器                       10

标签选择器                                       1

通配符选择器                                    0

将每一行上的所有选择器转化为这些数值进行相加得的结果越大则优先级越高!

http://www.ngui.cc/el/3419315.html

相关文章

PTA乙级过程记录

目录 1. PAT乙级1001 2. PAT乙级1002 3. PAT乙级1004 4. PAT乙级1006 PAT乙级1001 害死人不偿命的(3n1)猜想 &#xff08;15 分&#xff09; 作者: CHEN, Yue 单位: 浙江大学 时间限制: 400 ms 内存限制: 64 MB 代码长度限制: 16 KB **卡拉兹(Callatz)猜想&#xff1a;** 对…

c++模板-数组类

题目&#xff1a;编写一个程序&#xff0c;使用类模板对数组元素进行排序、倒置、查找和求和。 提示】&#xff1a;设计一个类模板。 Template Class Array{ … } 具有对数组元素进行排序、倒置、查找和求和功能&#xff0c;然后产生类型实参分别为int型和double类型的两个模板…

类的继承—派生类的函数调用分析

题目&#xff1a;定义一个基类BaseClass&#xff0c;有整型成员变量Number&#xff0c;构造其派生类DerivedClass&#xff0c;观察构造函数和析构函数的执行情况。 代码如下&#xff1a; /*定义一个基类BaseClass&#xff0c;有整型成员变量Number&#xff0c;构造其派生类Der…

类的继承-多态-vehicle类/CStereoShape类/employee类

题目如下&#xff1a; 定义一个车&#xff08;vehicle&#xff09;基类&#xff0c;具有MaxSpeed、Weight等成员变量&#xff0c;run、stop等成员函数&#xff0c;由此派生出自行车&#xff08;bicycle&#xff09;类、汽车&#xff08;motorcar&#xff09;类。自行车&#xf…

win10上利用Anaconda安装tensorflow-问题整理

我的安装环境&#xff1a;win10 1803 /Anaconda 5.1.0/python 3.6.0 安装Tensorflow 安装Tensorflow时&#xff0c;需要从Anaconda仓库中下载&#xff0c;一般默认链接的都是国外镜像地址&#xff0c;下载肯定很慢&#xff0c;一般使用用国内清华镜像&#xff0c;需要改一下链…

c++语言基础—多态—重载运算符complex类

题目&#xff1a; 创建复数类complex&#xff0c;其中包含double类型数据成员real和image&#xff0c;分别表示复数的实域和虚域。为complex类重载运算符“”和“-”&#xff0c;用来实现两个复数的加法和减法运算。要求重载函数是友元函数。 代码实现&#xff1a; #include &…

面向对象的课程设计——成绩管理系统

c面向对象的课程设计 题目&#xff1a;学生成绩管理系统 输入一个班级的学生基本信息&#xff08;包括学号&#xff0c;姓名&#xff0c;性别&#xff0c;科目&#xff09;&#xff0c;对N门考试的成绩进行管理&#xff08;例N5&#xff09; 要求 用户录入每个学生每门课程的分…

python网络爬虫与信息提取实例

目录1.百度/360搜索关键词提交2.网络图片的爬取和存储3.中国大学排名定向爬虫1.百度/360搜索关键词提交 搜索引擎关键词提交接口 百度的关键词接口&#xff1a; http://www.baidu.com/s?wdkeyword 360的关键词接口&#xff1a; http://www.so.com/s?qkeyword 功能描述&#…

数学建模之预测模型简要分析

以下对数学建模常用的几种预测方法进行归纳总结&#xff1a; 1.灰色预测模型&#xff1a; 1.1 GM&#xff08;1,1&#xff09;预测模型实际操作 1&#xff09;数据检验与处理&#xff0c;判断数据列的级比是否都落在可容覆盖内&#xff0c;从而判断已知该数据列是否可进行灰色预…

MATLAB学习与使用:向量及其运算

1.MATLAB向量及其运算 (1)直接输入向量&#xff1a;a [1,2,3,4],b [2 1 4 5],c [1;2;3;4] a为行向量 b为行向量 c为列向量 (2)利用冒号表达式生成向量&#xff1a;a 1:2:12,b 1:5 默认间距为1 (3)线性等分向量的生成&#xff1a; y linspace(x1,x2)%默认生成100维的行向…