选择器高级、样式及布局

最新推荐文章于 2022-07-09 18:08:49 发布

weixin_34309543

最新推荐文章于 2022-07-09 18:08:49 发布

阅读量260

点赞数

原文链接：http://www.cnblogs.com/hesujian/p/11117042.html

版权

选择器高级

选择器高级主要是基础选择器的各种组合，分为以下三个：

1.群组选择器

    <style>
    /* 群组选择器:可以同时控制多个标签 */
    /* 选择器位通过逗号隔开，每一个选择器位都可以为id、class、选择器组合   */
        a,.p2,#p1{
            height: 10px;
        }
    /*  这样就可以同时修改3个标签的样式  */
    </style>

2.后代（子代）选择器

<!--后代选择器通过空格隔开,会在前面标签的所有后代标签中匹配-->
    eg: .d1 .h1
<!--子代选择器通过大于号隔开，只会在前面标签的所有子代标签中匹配-->
    eg: .d1>.h1
<!--后代子代选择器控制的只是最后一个标签，前面的都是修饰-->

3.兄弟选择器

<!--兄弟选择器通过波浪号~隔开，会匹配前面标签下面的兄弟标签-->
    eg：.d1~.h1
<!--相邻选择器通过加号+隔开，会匹配前面标签下面的相邻标签-->
    eg：.d1+h1
<!--兄弟相邻选择器控制的也只是最后一个，前面都是修饰-->
<!--兄弟相岭选择器存在的问题：无法匹配第一个-->

伪类选择器

<!--伪类选择器-->
<!--见到: 或者是::就是伪类选择器-->
<!--伪类选择器影响优先级，一个伪类选择器相当于一个class-->
:nth-child()
:nth-of-type()
括号里面都是填的数字，并且是从1开始编号
:nth-child()
<!--    会先匹配层级关系，就是编号（每一个标签在父类标签中的编号）-->
<!--    匹配上了之后再匹配:之前的选择器-->
:nth-of-type()
<!--    会先匹配:之前的选择器（在同一个父级标签中）-->
<!--    再匹配层级关系，选择控制的标签-->

a标签的四大伪类

<!--a标签为超链接标签-->
<!--有四种伪类-->
1、 a:link   
<!--    a标签的初始化状态，就是没有点击过的状态-->
2、 a:hover
<!--    a标签的悬浮状态，就是鼠标放在上面的状态-->
3、 a:active
<!--    a标签的激活状态，就是鼠标点击下去的状态-->
4、 a:visited
<!--    a标签的访问过后的状态-->
<!--其中最重要的是悬浮状态与激活状态-->

css样式

文本样式

<!--字体大小（默认16px）-->
font-size: 16px 
<!--字族  可以跟多个（后面代表备用字体）-->
font-family: "微软雅黑" 
<!--字体颜色-->
color: black  
<!--水平位置 left center right-->
text-align: center  
<!--行高 默认文本在行高的垂直居中，要实现文本的垂直居中，让文本行高等于容器高-->
line-height: 100px  
<!--字重（粗细）100 - 900 或者用单词表示 -->
font-weight: 100px     
<!--文本划线 underline  overline  line-through none-->
text-decoration: underline     
<!--字体样式（斜体、加粗之类）-->
font-style: normal