Java|web基础——CSS层叠样式表 css|前端|css3|前端

- - CSS的作用：
  - 基本语法
  - 选择器
  - - 1.类选择器
    - 2.id选择器
    - 3.标签选择器
    - 4.包含选择器
    - 5.伪类
  - 选择器的优先级
  - 子选择器
  - 相邻选择器 div +p
  - 相邻所有选择器 div ~p
  - 属性选择器 input[type=“password”]
  - 过滤选择器

CSS的作用：

实现了样式和html的代码分离
弥补html对属性的控制不足
精确的控制页面的布局
可以提高页面的执行效率
css有特殊的功能

特性：继承性，层叠性

基本语法

选择器{ 属性1:属性值；属性2：属性值 ...... }

选择器
1.类选择器
2.id选择器
3.标记选择器
4.包含选择器
5.伪类
1.类选择器标签后面加上class，双引号里面的内容就是类选择器值
.p1{ color:red }——点后面的括号{}里面可以定义具体的样式

New Document - 锐客网.p1{ color:red } 查看文字内容查看文字内容查看文字内容查看文字内容查看文字内容

2.id选择器标签后面加上id并赋值，在内联样式style里面或者css文件里面可以给对应的标签添加样式

New Document - 锐客网 #p2{ font-size:100px; } 查看文字内容查看文字内容查看文字内容查看文字内容查看文字内容

3.标签选择器在css样式里面直接标签名

New Document - 锐客网 p{color:red; } 查看css的效果查看css的效果查看css的效果

4.包含选择器

New Document - 锐客网 olulli{font-size:50px; color:red} zhangsan 23 lisi

5.伪类

1.未连接a:link 2.已经访问链接a:visited 3.进入链接a:hover 4.激活（按下）状态a:active 其中的hover 和active 可以用于其他控价 New Document - 锐客网a:hover{font-size:50px; } 我的链接

选择器的优先级
在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高
2、类选择器
3、标记选择器
!important>内联样式>id选则器>class选则器>标签选择器

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

子选择器
div >p{
意思是 div 里面所有的子标签p 都被会选中注意对孙子标签是不起作用的
}
相邻选择器 div +p
div +p{
意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p
之间隔着一个元素那是选不中的
}
相邻所有选择器 div ~p
div ~p{
意思是选中 div 后面所有同级的p元素即使多个p 元素之间有隔着的其他元素也是能选中p元素
}
属性选择器 input[type=“password”]

a[title] { 意思是选中 a标签里面只要有 title 这个属性的都会选中 } a[title=num1] 意思是选中属性title=num1 的a 标签 a[title^=num] 选中title的属性值以num 开头的a标签 a[title$=num]选中title的属性值以num 结尾的a标签a[title|=num] 选中title的属性值以num-连接的a标签如 a[title~=num] 选中title的多个属性值以空格隔开的有其中一个属性值都能选中例如三个属性值你任意选一个都能选中比如a[title~=num2] 和 a[title~=num3] 选中的其实是同一个标签]a[title*=num] 选中title属性值包含num的都能选中例如 a[title=num][name=lisi] 多个属性选择意思是选中 title=num 并且 name=lisi 的这个a标签

过滤选择器

文章图片

:last-childp:last-child 选择属于其父元素最后一个子元素元素。 :not(selector)li:not(#my) 选择id不是my的所有li元素。 ::selection当鼠标左键选中文本时这里注意是两个冒号前面不加任何标签 :root 选择文档的根元素。跟* 这个选择器很相似 :emptyp:empty 选择没有子元素的每个元素（包括文本节点）。例如【Java|web基础——CSS层叠样式表】这里面没有任何子标签和文本就会被选中