浅谈css几种常用的选择器

最新推荐文章于 2024-07-12 17:44:39 发布

OYZYY

最新推荐文章于 2024-07-12 17:44:39 发布

阅读量196

点赞数 1

本文链接：https://blog.csdn.net/qq_41430599/article/details/81157963

版权

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

每一条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

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

OYZYY

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈css几种常用的选择器

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

扫一扫