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”}
-
-