CSS知识点(一)

138 阅读3分钟

CSS 选择符(上下文,ID和类,属性)

上下文选择符

基于祖先或同胞元素选择一个元素,又称后代组合式选择符,以空格作为分隔符

1.普通上下文选择:祖先元素 要选择的元素(div p {})

2.子选择符(>) :标签1>标签2,标签1只能是标签2的直接父元素

3.紧邻兄弟选择符(+):标签1+标签2,标签2必须紧跟在其同胞元素标签1的后面

4.一般兄弟选择符(~):标签1 ~ 标签2,标签2必须跟在(不一定紧跟)其兄弟标签1后面

5.通用选择符( * ):匹配任何元素

   *{}:表示匹配所有元素
   p*{}:p所包含的所有元素
   p*a{}:会选中所有p标签下非子元素的a标签
    

ID和类选择符

基于id和class

属性选择符

基于属性的有无和特征

1.属性名选择符(标签名[属性名]):如img[title]选择任何带title属性的img标签

2.属性值选择符(标签名[属性名='属性值']):如img[title='red flower']选择任何title属性值为 red flower的img标签

伪类

   这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上

UI伪类

会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用样式

1.链接伪类

1.a:link(初始时,用户未曾点击过)
2.a:visited(用户此前点击过)
3.a:hover(鼠标指针正悬停在链接上)【:hover伪类可以适用于任何元素】
4.a:active(链接正在被点击【鼠标在元素上按下,还未释放】)

2. :focus 伪类

点击获取焦点

3. :target伪类

如<a href='#test'>TEST</a>
页面其他地方有<p id='test' >target(目标)</p>
css:#test{color:#eee}
用户点击a标签定位到p时,p的字体颜色会变为灰色

结构化伪类

会在标记中存在某种结构上的关系时(如某个元素是一组元素中的第一个或最后一个),可以根据标记的结构应用样式,比如根据某元素的父元素或前面的同胞元素是什么,为相应元素应用样式

  1. :frst-child:last-child
  2. :nth-child:nth-child(n)
  

伪元素

伪元素是DOM数没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容

  1. ::first-line 用于向文本的首行添加样式,只能应用于块级元素

  2. ::first-letter 用于向文本首字母添加样式,只能应用于块级元素

  3. ::before 可以在元素内容之前插入一些内容

  4. ::after 可以在元素内容之后插入一些内容 ::after{content:'X'}

  5. ::selection 匹配用户选择的部分

伪元素和伪类的区别

最大的区别就在于有没有创建一个文档树以外的元素。伪元素创建了一个文档树以外的元素并为其添加样式,这个容器不包含任何DOM元素,但是可以包含内容。换句话说伪类和伪元素的区别就是伪类的操作对象是文档树中已有的元素,而伪元素则是创建了一个文档树以外的元素

CSS属性

CSS属性值

CSS属性值主要分为

1.文本值:如font-weight:bold声明中的bold就是一个文本值,文本值也叫做关键字

2.数字值:除0之外后面都会带单位(px)

绝对值:px(像素),pt(点),in(英寸),cm(厘米),mm(毫米),pc(皮卡)
相对值:ex(给定的字体中字母x的高度)em(给定字体中字体M的宽度)

3.颜色值:颜色值格式rgb,hsl(色相,饱和度,亮度)和十六进制值表示

CSS属性继承

css大部分跟文本相关的如字体颜色,字体,字号等都可以继承。涉及元素盒子的定位和显示方式如边框、外边距、内边距等不会继承