第十课-高端选择器

第十课-高端选择器

一、选择器复习

ID选择器 #id
类名选择器 .class
标签选择器 tagname
通配符选择器 *
多元素选择器 .class,#id
后代选择器 .class #id
子元素选择器 .class>#id
毗邻选择器 .class+#id (同层级)
关联后选择器 .class~#id (同层级
伪类(状态/条件)选择器部分 :hover(:focus)

二、伪类选择器

如果我们想要某些元素处于某种状态的时候才表现出特定的样式,就使用伪类选择器.
其中: 某些元素指需要加伪类的元素
某种状态指伪类选择器(点题)
特定样式就是后续添加的样式.

​ 例子一: (请将下面的元素的三个关键点找到)
​ a:hover{
​ color: blue；

​ }

例子二:(同样找找)
.box ul.list:focus p+div{
display: block;
}

​ 总结特点:
​ 1. 去掉伪类选择器(:hover等)也是正常选择器
​ 2. 谁有状态给谁加
那状态有哪些呢?

三、伪类选择器(状态)

:hover 鼠标悬浮
:visited 被访问过的,特指a标签
:link 未被访问的链接
:active 被按下的状态
:focus 处于被聚焦的状态
:checked 表单被勾选的状态(几乎只有表单可以记录状态)
:first-line 首行状态
::selection 被选中的文本的样式被修改(两个冒号)
:not(select)反选,能选很多
还有很多…咱们慢慢接触总结

四、结构性伪类选择器

当我们需要选择某个元素里面的第n个元素的时候使用
注意以下元素及区别
E:nth-child(n)
E元素父级的所有子元素集合中的第n个子节点,
E:nth-of-type(n)
从E元素父级的所有子元素集合中第n个E元素,无视其他的元素
E: first -child
从E元素的同级中选择第1个E元素
E: last-child
从E元素的同级中选择最后一个E元素

同样的还有
E:nth-last-child(n)
从E元素的同级中选择倒数第n个元素,如果它是E,则设置样式
E:nth-last-of-type(n)
从E元素的父元素中选择倒数第n个E元素,无视其他的元素

同样的还有
奇数偶数选择器
E:nth-child(even) 偶数选择器
选择满足条件的偶数序号的元素
E:nth-child(odd) 奇数选择器
选择满足条件的奇数选择器

​ 同样的,last也生效

五、属性选择器

class是属性(.),id也是属性(#),但是其他的属性怎么选择,自定义属性呢?
例如:

div[attribute] 具有属性名叫attribute的div标签,中括号就是选择属性
div[attribute=‘box’],更进一步的属性值也要为box
例如: 	<div attribute='box'></div>

div[attribute^=‘bo’] 更进一步属性值以bo开头,可以很方便的匹配box1/box2…这种
div[attribute$=‘ox’],更进一步的属性值以ox结尾的元素,很方便匹配结尾相同的元素
div[attribute*=‘o’], 匹配属性值中有字幕o

六、伪元素before/after是什么

和伪类的区别
伪元素是元素,伪类是状态/条件

那伪元素和一般的元素的有什么区别呢?
锦上添花
几乎没有区别
写法不一样,(css添加的)
需要css渲染完成才知道有无伪元素,不影响布局结构,
无法被爬虫识别

它的写法：

​ 伪元素:
​ 一个盒子(非单标签)有两个伪元素,叫before/after
​ 通过以下方式构造
​ E::before{
​ content:’’;//激活伪元素
​ }
​ E::after{
​ content:’’;
​ }
​ content是伪元素的内容样式,必须写

伪元素 行内
before
after

content:激活
b efore 插入文本在正文之前
after 文本正文之后

可以解决 就是解决高度塌陷

伪元素存在的意义
1,给页面进行修饰
2,给文本添加内容

有问题
单标签没有伪元素
img input

七、Content插入值

content:
‘string’: 在节点之前插入文字
attr(attrname): 在节点中插入元素属性的值
<div data=‘No.1’age=‘18’>
​ url(媒体文件): 比如图片
​ counter(setName): 添加一个可以自增的序号
​ 其中需要在特定的标签位置
​ 重置: counter-reset: setName;
​ 增加: counter-increment: setName;

八、伪元素性质:

伪元素性质:
1. 行内元素
2. before在标签正文内容前,可以理解为标签开始内容的前面的元素
3. 说after在标签的结尾之前,可以理解为正文内容之后
4. 具有文本属性,
5. CSS创建的抽象元素,是个虚拟的容器
6. 清除浮动

九、样式补充知识点

外部样式引入

写入head,优先书写,阻塞进程,读取完成后加载dom
@import url(‘’); 必须写在样式头部
写入style,优先书写,不影响进程,可能看到无样式dom,到有样式dom的变化,后续可添加媒体查询

​ 内部样式优先级>=外部样式优先级,因为link写在前面所以优先加载,后续内部样式覆盖

1. 外部样式编码格式
   编码格式是文件的保存识别格式,所以外部css也要有编码格式,文件第一行
   @charset ‘utf-8’;

圆角样式

border-radius:一个值 四个边 圆角

​ 左上右下 左下右上

​ 左上 左下右上 右下

​ 左上 右上 右下 左下

​

border-top-left-radius 左上

border-top-right-radius 右上

border-bottom-left-radius 左下

border-bottom-right-radius 右下

​ 水平左上 右上 右下 左下 垂直

border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

border-radius:50% 变成圆

十、权重排序

!important > 内联 > id >CSS | 伪类 | 属性>标签|通配符|伪元素