css选择器以及块级元素、行内元素

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>

高级选择器
- 1. 后代选择器：使用空格表示后代选择器，包括子类、孙类。。。。
    - - 使用语法： .类名+空格+标签选择器如 .father p{}
  2. 子代选择器：使用>来表示子代选择器，仅仅表示当前的标签下的子类。　　　　　　　　　　　　　　　　　
  - - - 使用语法： .类名+">"+ 标签选择器{} 如 .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”}

行内标签与块级标签　　
- - 两种标签的特点

- - 两种标签的转化：display
    - - 块级标签转化为行内标签：display：inline
      - 行内标签转化为块级标签：display：block
        
        另外：display：none：隐藏当前的元素，但是不占用位置。
        
        而 visibility: hidden：隐藏当前的元素，但是占用当前位置。

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

css选择器以及块级元素、行内元素

css选择器

基础选择器（都是要写在head部分里）

高级选择器

属性选择器（仅限在表单空间中）

伪类标签（一般用在a标签中）

行内标签与块级标签

伪类标签（一般用在a标签中）　

行内标签与块级标签　　