前端初步预习

Posted 2020-09-02

今天讲的是选择器，有标签选择器，类选择器，id选择器，通配符（id，class命名规范：不能用数字和短横开头，用有意义的英文命名）

标签选择器，特点是以标签名为选择器名，根据标签名找到元素，可以控制页面上所有同样的元素。

• （class）类选择器：重用性比较高

  格式：.+元素class名{

                      属性：值；
                      }

• id选择器：只能用一次

  格式：#+元素id名{

                      属性：值；
                      }

• *通配符：会选择页面上所有的标签导致执行的效率下降，工作中少用甚至不用。

   格式：*{
             属性：值；
             }

1. 复合选择器

 

• 后代选择器：只作用在最后一个选择器上（建议用2-3个）

结构 ： 选择器1 空格  选择器2  空格  选择器3{

                                              属性：值；
                                            }

• 子代选择器：当前标签的直接子元素（建议用2-3个）

结构 ： 选择器1>选择器2{

                         属性：值；
                        }

• 交集选择器：同时满足多个选择器的元素的要求才能有效

结构 ： 选择器1 选择器2 {

                          属性：值；
                         }

• 并集选择器：只要满足任意一个条件就能被影响

结构 ： 选择器1 ，选择器2 ，选择器3{

                                     属性：值；
                                   }

• 伪类

1.a:link 链接

2.a:visited  访问后

3.a:hover  鼠标经过

4.a:active  点击时


1和2 只能用于a标签
3和4 可用于其标签

• 块级元素

例如：p ,h1-h6 ,div ,ul , li ......
特点：默认占一整行，可以设置高宽，默认和父元素一致

• 行内块级元素

例如：img ,input
属性：display：inline-block;
特点：可以设置宽高，一行可以显示多个

• 行内元素

例如：a ,spaan ,b , em ......
属性：display:inline;
特点：一行里面可以显示多个，无法设置宽高，大小由内容决定