一、选择器

1、类型选择器

用法： 指html类、标签直接定义样式
p{ }
div{ }
span,a{ }

 <style>p {width: 120px;height: 100px;/* 边框：边框大小  边框线型  边框颜色 */border: 1px solid  red;}span,a {background-color: tomato;}</style><body><p>段落1</p><div>盒子2</div><span>元素1</span><a href="#">超链接</a></body>

2、class选择器

标签内定义一个class类名（类名可以多个），在样式中用 .leiming{ }

<style>.leiming{background-color: #000;}
<s/tyle>
<body><div class="leiming  xiaobai xioalv"></div>
</body>

3、id选择器

唯一选择器命名不能重复，在样式中用 #leiming{}

<style>#leiming{background-color: #000;}
<s/tyle>
<body><div id="leiming"></div>
</body>

4、动态伪类选择器（:hover）

注： :前面的标签可以是其他

4.1. a:link{声明;} 超链接访问前的样式
4.2. a:visited{声明;} 超链接访问后的样式
4.3. a:hover{声明;} 鼠标悬停显示的样式(常用)
4.4. a:active{声明;} 鼠标按下显示的样式
4.5. input:focus{声明;} 元素获取焦点执行样式

<style>//必须按顺序才可以一起使用4个a:link{};a:visited{};a:hover{};a:active{};
</style><body><a href="www.csdn.net" target="_blank">点我</a>
</body>

5、群组选择器（，)

用法:选择器1,选择器2,选择器3,…{声明;}

<style>div {color: #f00;}p {color: #f00;}span {color: #f00; }div,p,span {color: #f00; }p,h1 {margin: 0;}</style>
<body><div>div</div><p>p</p><span>span</span><h1>h1</h1>
</body>

6、包含选择器也叫后代选择器（p span{}）

用法：父元素子元素{} ；
父在前子在后，用空格隔开。

 <style>div span {color: green;}p span{color: aqua;}</style>
<div><span>内容1</span></div><p><span>内容2</span></p>

7、相邻兄弟选择器(+)：

 找相邻后面的兄弟（一个）

<style>div+p{color:#fffff
}
</style><body><p></p>    </div></div><p>找到这个</p>
</body>

8、兄弟选择器（~）

找到后面多个相同兄弟(可以划过兄弟，其他兄弟变色、变大)

<style>
div~p{color:#fffff
}
</style><p></p>
</div>鼠标触摸这个</div>
<p>变色</p>
<p>变色</p>
<p>变色</p>

9、目标伪类选择器（目标:target{})

<style>p{display:none;}p:target{display:block;}
</style>
<body><!-- 目标:target 子元素{属性:属性值;} --><a href="#p1"></a><a href="#p2"></a><a href="#p3"></a><p id="p1">adhah adajdlka 大家阿达啊大大 ada</p><p id="p2">adhah adajdlka 大家阿达啊大大 ada</p><p id="p3">adhah adajdlka 大家阿达啊大大 ada</p>
</body>

10、伪元素选择器

::first-letter 第一个字

::first-line 第一行（以浏览器为准的第一行）

::before 和 ::after 必须带一个属性content，在内部内容的前面或者后面插入内容

::selection 对光标选中的元素添加样式。

<style>p::before{content:"在第一个p前加内容"；}p::after{content:"在最后p添加内容"；}/* 第一个字 */div::first-letter{font-size: large;}/* 第一行 */div::first-line{color: #000;}
</style><div>（before的内容） <p>第一个字</p>（after的内容）<p>很多个字</p>
</div>

11、结构选择器():

1、li:nth-child(1){} 第一个

li:first-child{} 第一个

li:last-child{} 最后一个

li:nth-child(even){} 选择偶数个

li:nth-child(odd){} 选择奇数个

li:nth-child(4n){} 选到4的倍数

li:nth-child(-n+9):nth-child(n+7){} 选到7-9

li:nth-last-child(2){} 选到倒数第二个

2、p:first-of-type(1){} 只能选到该父类的子类（不会选到h1）

3、p:empty{} 没有内容会执行该样式

<style> li:nth-child(1){color:red;}li:nth-child(2){color；bule;}//注意：第一个会选到h1p:nth-child(1){color:red;}
</style><body><ul><li></li><li></li></ul><div><h1></h1><p></p><p></p><p></p><h1></h1></div>
</body>

12、属性选择器

将元素属性用于选择器中，从而获取指定元素属性或者值得元素；

语法：

（1）[属性] ：匹配 “指定属性” 的 “所有” 元素；

*[title]{color:red}  //标题变红

（2）元素[属性] ：匹配 “指定属性” 的 “指定” 元素；

div[class] {color:red;
}

input[type] : 获取具备type属性的input；

input[id] : 获取具备id属性的input；

（3）元素[属性=“值”] ：匹配 “指定属性等于值” 的 “指定” 元素；

div[class="a"] {width:100px;height:100px;background-color: bisque;}

（4）元素[属性~=“值”] ：匹配 “指定属性中包含这个值(独立的单词)” 的 “指定” 元素；

div[class~="abcd"] {width:100px;height:100px;background-color: skyblue;
}

（5）元素[属性^=“值”] ：匹配 “指定属性以指定值开始” 的 “指定” 元素；

div[class^="ab"] {order-color: greenyellow;
}

（6）元素[属性*=“值”] ：匹配 “指定属性包含值(可以是非独立的单词)” 的 “指定” 元素；

div[class*="c"] {width:100px;height:100px;background-color: red;
}

（7）元素[属性$=“值”] ：匹配 “指定属性以指定值结束” 的 “指定” 元素；

div[class$="c"] {width:100px;height:100px;background-color: black;
}

（8）元素[属性!=“值”] ：匹配 “指定属性不等于值” 的 “指定” 元素；

div[class!="abcd"] {width:100px;height:100px;background-color: pink;
}

<style>div{height:100pxwidth:100px;}
</style>
<body></div><div class="a"></div><div class="ab"></div><div class="abc"></div><div class="abcd"></div><div></div>
</body>

13、子元素选择器(>)

选取指定元素的后代元素

区别：子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选取

<style>div>p{height:100pxwidth:100px;background-color: yellow;}
</style><body><ul><li></li><li></li></ul>
</body>

二、选择器权重

标签选择器0001

class选择器0010

id选择器0100

行内样式表1000

继承权重为0000

包含选择器（权重之和）

加！important（权重最大）

 <style>div span {color: green  ! important;}p span{color: aqua;}</style>

群组选择器（，权重自身大小）

前端学习-关于选择器的介绍和使用相关推荐

前端学习笔记day48 CSS介绍
1. CSS-----层叠样式表设置样式的三种方式: 1. 直接在标签内写style属性设置该标签的样式(又叫内联标签) 2. 在head标签中写style标签设置body标签中子标签的样式: 3. ...
从零开始前端学习[14]:选择器的优先级
选择器的优先级选择器的优先级的使用注意事项,往往在我们写代码的时候是格外需要注意的. 单独来看标签的优先级 ID个数不同的时候的优先级 ID个数一致的时候,看类选择器个数 ID选择器和类选择器都一致 ...
web前端学习笔记——选择器
选择器:选择要添加样式的 HTML 标签的一种方法.模式基础选择器:标签选择器.id 选择器.类选择器.通配符选择器. 高级选择器:后代选择器.交集选择器.并集选择器. 基础选择器标签选择器通过 ...
猿创征文｜我的前端学习之旅【来自一名大四老学长的真情流露】
猿创征文 | 我的前端学习之旅自我介绍我浑噩的大一大二(是不是另一个你) 我的大三生活大三上(学习过程.学习方法.推荐网站) 大三下(技术提升.荣誉证书.推荐比赛) 我与 CSDN 的机缘(从小 ...
Web前端学习（千锋）
Web前端学习一 . 选择器标签选择器群组选择器(分组选择器) 通配选择器层次选择器属性选择器伪类选择器结构性伪类选择器二 . css继承三 . css优先级四 . css盒子模型 ...
【前端学习之HTMLCSS】-- CSS第三篇 -- 选择器（上）
[前端学习之HTML&CSS]-- CSS第三篇 – 选择器(上) 文章目录 [前端学习之HTML&CSS]-- CSS第三篇 -- 选择器(上) 前言选择器简单选择器 1. ID ...
前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础文章目录前端学习第一周-HTML基础前言 DAY 1 计算机组成计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...
HTML 前端学习（3）—— CSS 选择器
HTML 前端学习(3)-- CSS 选择器 CSS 注释 CSS 语法结构 CSS 三种引入方式行内式 link 引入 style CSS 基础选择器 id 选择器类选择器元素(标签)选择器 ...
2020年最新前端学习路线
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线.先从初级前端工程师所需的技能开始,然后一路升级到高级 ...

前端学习-关于选择器的介绍和使用