css选择器
css选择器主要分为:1.基本选择器;2.高级选择器;
-
基础选择器(都是要写在head部分里)
- 标签选择器:标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“
body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ #选中的是body里面的所有p标签。 color: red; font-size: 20px; } span{ color: yellow; }
-
-
id选择器(一般用在JS中)
-
表示方式: #+id号码
-
同一个页面中id不能重复。任何的标签都可以设置id id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
-
-
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> <style type="text/css"> #p1{ ##在head部分通过id选择器对body里的p标签进行选择操作。 color: green; font-size: 30px; } </style> </head> <body> <p id="p1">尝试id选择器标签</p> </body> </html>
-
- 类选择器
- 所谓类 就是class . class与id非常相似 任何的标签都可以加类但是类是可以重复,属于归类的概念。
- 同一个标签中可以携带多个类,用空格隔开
- 每个类要尽可能的小,有公共的概念,能够让更多的标签使用。
- 语法:“.” 加上 类名
- 类选择器
例:head部分:
<head> <meta charset=utf-8> <meta name=description content=""> <meta name=viewport content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #在head部分,通过选择body里的类来进行样式改变。 .lv{ color: green; } .big{ font-size: 40px; } .line{ text-decoration: underline; }
body部分:
<body>
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p> #通过给p标签归类来批次操作标签样式
</div>
</body>
-
高级选择器
-
- 后代选择器:使用空格表示后代选择器,包括子类、孙类。。。。
-
-
使用语法: .类名+空格+标签选择器 如 .father p{}
-
-
- 子代选择器:使用>来表示子代选择器,仅仅表示当前的标签下的子类。
-
-
-
使用语法: .类名+">"+ 标签选择器{} 如 .father +">"p{}
-
-
- 后代选择器:使用空格表示后代选择器,包括子类、孙类。。。。
-
-
-
- 并集选择器:同时选中多种类型的标签选择器,中间用逗号隔开。。一些共性的元素,可以使用并集选择器。
-
- 使用语法: h1,p,span { }
-
- 交集选择器:使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类标签。
-
- 语义理解:如 p.A,指的是选中所有<p>中,类名是A的标签。
-
- 通配符选择器:*{ } 一般用于重置样式。
- 并集选择器:同时选中多种类型的标签选择器,中间用逗号隔开。。一些共性的元素,可以使用并集选择器。
-
-
属性选择器(仅限在表单空间中)
-
- 根据标签中的属性,选中对应的标签。
-
- 根据属性查找:*[for],找到有属性for的标签。
- 根据属性值查找:*[for="blue"],找到属性for的值为blue的标签。
- 根据属性值开头查找: *[for^="abc"],选中属性for值开头为abc的标签。
- 根据属性值结尾查找:label[for$="bd"],选中label标签中属性for对应值结尾是bd的标签。
- 包含某元素的标签:label[for*="a],选中label标签中for属性对应值包含a元素的标签。
-
- 根据标签中的属性,选中对应的标签。
-
-
伪类标签(一般用在a标签中)
-
-
-
-
没有被访问过的样式 a:link{ color=“blue” }
-
访问过后的样式 a:visited{ color = “purple”}
-
鼠标悬停时的样式 a:hover{color = "green"}
-
鼠标按住时的样式 a:active{color = “red”}
-
-
-
-
-
行内标签与块级标签
-
- 两种标签的特点
-
-
-
-
-
- 行内标签(a、apan)
-
- 在一行内显示
- 不能设置宽高
- 宽高是内容的高度
- 行内块(input)
-
- 在一行内显示
- 可以设置宽高
- 块级标签(div、p、ul、ul)
-
- 独占一行
- 可以设置标签宽高
- 如果不设置宽高,默认body100%的宽度。
-
-
-
- 两种标签的转化:display
-
- 块级标签转化为行内标签:display:inline
- 行内标签转化为块级标签:display:block
-
- 另外:display:none:隐藏当前的元素,但是不占用位置。
- 而 visibility: hidden:隐藏当前的元素,但是占用当前位置。
-
-
- 两种标签的转化:display
-
- nth-child选择器
-
-
- 选中第一个元素:ul li first-child{ }
- 选中最后一个元素:ul li last-child{ }
- 选中指定位置元素:ul li nth-child(3)选定第三个
- 选中所有元素:ul li nth-child(n)
- 选中奇偶数:ul li nth-child(2n或者2n-1)
-
-
- 伪元素选择器 (两个冒号)
-
-
- 设置第一个字母的样式:p::first-letter{ }
- 在.....之前添加内容,使用此属性一定要跟content结合使用。例如:p::before{content = “monkey”}
- 在.....之后添加内容,使用此属性一定要跟content结合使用。例如:p::after{content = “monkey”}
-
-