CSS
关注
分享
扫一扫
@ ^ @
...
展开
-
否定伪类
否定伪类: 作用:可以从已经选中的元素中剔除某些元素 语法: :not(选择器) !DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>否定伪类</title> <style> /* * 为所有元素设置一个背景元素颜色为黄色,除了...原创 2019-07-28 22:02:37 · 168 阅读 · 0 评论 -
子元素选择器
* 默认状态下标签为* * :first-child 可以选中第一个子元素 * 可与>子元素符搭配使用 * :last-child 可以选中最后一个子元素 * :nth-child(N) 可以选中任意位置元素 * 该选择器后面可以指定一个参数,指定要选中第几个子元素 * even表示偶数位置的子元素 * odd 表示奇数...原创 2019-07-28 21:51:41 · 967 阅读 · 0 评论 -
属性选择器
为所有具有title属性的p标签设置一个背景为黄色 属性选择器 作用:可以根据元素的属性或属性值来选取指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名=“属性值”]选取含有指定属性值元素 [属性名^=“属性值”]选取属性值以指定内容开头的元素 [属性名$=“属性值”]选取属性值以指定内容结尾的元素 [属性名*=“属性值”]选取属性值以包含指定内容的元素 <!DOCTYPE h...原创 2019-07-28 21:15:03 · 875 阅读 · 0 评论 -
伪元素
使用伪元素来表示元素中的一些特殊位置 :before表示元素最前面的部分 一般before都需要结合content这个样式一起使用, 通过content可以向before或after的位置添加一些内容 after表示元素最后边添加 <!DOCTYPE html> <html> <head> <meta charset="UTF-...原创 2019-07-28 21:12:17 · 200 阅读 · 0 评论 -
伪类
伪类是专门用来表示元素的一种特殊的状态 比如:访问过的超链接,普通的超链接,获取焦点的文本框 当我们需要为处在这些特殊状态的元素设置样式时,就可以使用这些伪类 :link 表示普通的链接(没访问过的链接) :visited 表示访问过的链接 浏览器通过历史记录来判断一个链接是否被访问过 由于涉及用户隐私问题,所以visited只能设置字体颜色 :hover伪类表示鼠标移入的状态 :...原创 2019-07-28 18:28:01 · 256 阅读 · 0 评论 -
元素选择器(二)
元素之间的关系 父元素:直接包含子元素的元素 子元素:直接被父元素包含的元素 祖先元素:直接或间接被祖先包含的元素,子元素也是后代元素 后代元素:拥有相同父类的元素叫兄弟元素 后代元素选择器 作用: 选中指定元素的指定后代元素 语法: 祖先元素 后代元素{} 子元素选择器 作用: 选中指定的父元素为指定的子元素 语法: 父元素>子元素 IE6及以下浏览器不支持子元...原创 2019-07-28 16:45:55 · 117 阅读 · 0 评论 -
元素选择器(一)
元素选择器 作用:通过元素选择器可以选择页面中所有指定的元素 语法:标签名{ } id选择器 通过id属性值选中唯一的元素 语法 : #id属性值{} 类选择器 通过元素的class属性值选取一组元素 语法:.class属性值{} 选择器分组(并集) 通过选择器分组可以同时选中多个选择器对应的元素 语法:选择器1,选择器2,选择器N{} 通配选择器 可以选中页面中所有元素 语法: ...原创 2019-07-28 16:00:06 · 345 阅读 · 0 评论 -
块元素和内联元素
div就是一个块元素, 所谓块元素就是会独占一行的元素,无论内容多少都会独占一行 p h1 h2 h3...都会独占一行 div这个标签没有任何语义,是一个纯粹的块元素,他不会对 块中的元素设置任何默认样式 div元素主要用来对页面进行布局 span是一个内联元...原创 2019-07-28 15:53:01 · 205 阅读 · 0 评论 -
CSS （一）
CSS语法 CSS的style属性 内联样式、内部样式与css文件 html <!doctype html> <html> <head> <title>CSS</title> <!-- 也可以将css样式编写到head中的style标签中 将样式表编写到style标签中，然后通过CSS选择器选中指定的元素 ...原创 2019-07-21 23:11:34 · 197 阅读 · 0 评论 -
a的伪类优先级
涉及到a的优先级一共有四个: * :link * :visited * :hover * :active 实际应用中要按照以上顺序写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style ...原创 2019-07-28 23:27:31 · 159 阅读 · 0 评论 -
选择器优先级
当使用不同的选择器选中同一个元素时,并且设置相同的样式时 * 这是样式之间产生冲突,最终采用哪个选择器定义的样式,由选择器 * 的优先级(权重)决定,优先级高的优先显示. * 优先级规则 * 内联样式,优先级1000 * id选择器,优先级100 * 类和伪类,优先级10 * 元素选择器,优先级1 * 通配*,优先级0 * 继承样式,没有优先级 可以在样式的最后...原创 2019-07-28 23:16:04 · 289 阅读 · 0 评论 -
兄弟元素选择器
后一个兄弟元素选择器 作用: 可以选中一个元素后紧挨着的指定的兄弟元素 语法: 前加一个+后一个(被选中) 前加一个~后边所有(被选中) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>兄弟元素选择器</title> <style ty...原创 2019-07-28 21:53:17 · 249 阅读 · 0 评论