css规则、选择器（基础、复合）/选择器优先级

一、CSS规则

有两个主要的部分构成：选择器以及一条或多条声明（选择器 {样式}）

二、选择器（有两大类：基础、复合）

1.基础选择器

有单个选择器组成,包含如下选择器

（1）标签选择器

可以把某一类标签全部选择出来,比如所有的< p>标签等。
语法：
标签名{ 属性: 属性值; }

（2）类选择器

在HTML中以class属性表示，在css中以.表示.

一个标签可以有多个类名

<!DOCTYPE html>
< html lang="en">
< head>< meta charset="UTF-8">< title>Document< /title>< style type="text/css">.header1{color:red;}.header2{background-color: blue;}< /style>
< /head>
< body>< div class="header1 header2">你好!< /div>
< /body>
< /html>

注意：

多个类名中间必须用空格分开
标签可以分别具有不同类名的样式

多类名使用场景：

可以把一些标签元素相同的样式(共同的部分)放到个类里面
可以把一些标签元素相同的样式(共同的部分)放到个类里面
节省CSS代码,统一修改也非常方便.

（3）id选择器

在HTML中以id属性表示，在css中以#表示
一个id名在同个HTML文档中只有一个

（4）通配符选择器

在css中使用 * 定义，表示选取页面中所有元素，所有元素都有这个样式
语法
*{
属性：属性值;
}

总结

id选择器和类选择器的区别
① 类选择器(class )好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用。
各个选择器

2.复合选择器

（1）后代选择器

父元素下的子元素，只要是后代即可
语法
元素1 元素2{
属性：属性值;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.header1 .header2{color:red;}.header1 p{color: blue;}</style>
</head>
<body><div class="header1"><div class="header2">huuhni<p>你好!</p></div></div>
</body>
</html>

（2）子选择器

只能选择作为某元素的最近一级子元素，即只能选择亲儿子元素
语法
元素1>元素2{ 样式声明 }

< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< title>Document< /title>
< style type=“text/css”>

.header1>.header2{
color:blue;
}
.header1>p{
color:red;
}
< /style>
< /head>
< body>
< div class=“header1”>
< div class=“header2”>
huuhni
< p>你好!< /p>
< /div>
< /div>
< /body>
< /html>

header2是header1的亲儿子，p不是header1的亲儿子,.header1>p无效

（3）并集选择器

多组标签定义同一样式,各类选择器用英文 ,链接而成
语法
元素1,元素2{ 样式声明 }
并集选择器竖着写（也可以不用，看个人喜好），最后一个选择器不加逗号

< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< title>Document< /title>
< style type=“text/css”>
.header1, .header2{
color:blue;
}
< /style>
< /head>
< body>
< div class=“header1”>
你好!
< /div>
< div class=“header2”>
hhhh
< /div>
< /body>
< /html>

（4）伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)示，比如:hover、:first-child
（:first-child、:nth-child(n)、：last-child、:only-child详细信息：https://www.cnblogs.com/knightdreams6/p/11109755.html）
链接伪类选择器

一定要按顺序写 link、visited、hover、active

在实际开发中的写法（一般只用到这些）

：focus伪类选择器
用于选取获得焦点的表单元素。
焦点就是光标,一般情况 < input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说
语法
input: focus{ 样式声明 }

总结

选择器优先级
!important>内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器> 通配符 > 继承 > 浏览器默认属性
选择器优先级详细资料：
1.https://www.cnblogs.com/zxjwlh/p/6213239.html
2.https://www.runoob.com/w3cnote/css-style-priority.html

css规则、选择器（基础、复合）/选择器优先级相关推荐

CSS 2 emmet语法复合选择器元素显示模式
目录 Emmet语法 1.1快速生成HTML结构标签 1.2快速生成CSS样式语法 CSS的复合选择器 1.1什么是复合选择器 1.2后代选择器(重要) 1.3子选择器(重要) 1.4并集选择器(重要 ...
CSS（二）——复合选择器、元素显示模式、背景、三大特性
文章目录 *1.Emmet语法 *1.1 快速生成HTML结构语法 *1.2 快速生成CSS样式语法 1.CSS 的复合选择器 1.1 什么是复合选择器 1.2 后代选择器 (重要) 1.3子选择器( ...
CSS基本知识之复合选择器、元素显示模式、背景图片位置，精灵图
CSS基本知识之复合选择器.元素显示模式.背景图片位置,精灵图一.复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进 ...
使用css的类名交集复合选择器
首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括"交集"选择器."并集"选择器."后代"选 ...
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
WEB前端学习（3）CSS复习二（复合选择器+元素显示模式+ 背景）
一 CSS 复合选择器总结:复合选择器 1. 后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔.当标签发生嵌套时,内 ...
html5复合选择器,传智播客解读Css基本选择器与复合选择器
当使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制时,我们经常会用到CSS选择器.为了方便初学者对选择器有所了解,传智播客将对选择器的几种类别进行详细介绍和说明. 一. Css基本选 ...
css 的基本选择器，复合选择器，后代选择器
基本CSS选择器有标记选择器.类别选择器.ID选择器3种 1.标记选择器每一种HTML标记的名称都可以作为相应的标记选择器的名称,如h1,p,等等 2.类别选择器类别选择器的名称可 ...
CSS第四篇(复合选择器)
1.后代选择器概念:后代选择器又称为包含选择器作用:用于选择元素或元素的子孙后代,一个标签之后的所有标签都会选择写法:把外层标签写在前面,内层标签写在后面,中间用空格隔开父级子级{属性:属性 ...
前端基础之CSS复合选择器
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础 # CSS 第二天今天我们围绕一个导航栏案例进行 ...

css规则、选择器（基础、复合）/选择器优先级

css规则、选择器（基础、复合）/选择器优先级相关推荐

最新文章

热门文章