伪类选择器状态匹配

一、链接：4个状态
1、默认没有访问的状态：:link;
2、已访问过的状态：:visited;
3、鼠标悬停状态:hover;
4、激活状态：:active;

<style>
        a:link {
            color: #ccc;
            text-decoration: none;
        }
        a:visited {
            color: #000;
        }
        a:hover {
            color: red;
            text-decoration: underline;
        }
        a:active {
            color: slateblue;
        }
    </style>
     <a href="http://www.baidu.com">百度</a>

二、表单

 <style>
        /* 快速选中只读的 */
        input:read-only {
            background-color: slategrey;
        }
        input[type=email] {
            background-color: springgreen;
        }
        input:required {
            background-color: teal;
        }
        input:disabled {
            background-color: violet;
        }
    </style>
     <form action="">
        <p>用户名：<input type="text" name="username" value="admin" readonly></p>
        <p>邮箱：<input type="email" name="email" value="admin@admin.com" required></p>
        <p>密码：<input type="password" name="password" value="admin" disabled></p>
        <p><button>提交</button></p>
    </form>

选择器的优先级

1、当选择器相同时，写在后面的优先级大（离元素近的）
2、当标签选择器和类选择同时选中时，类选择的优先级大，级别高的层叠级别低的
3、id选择器>类选择>标签选择器

选择器的提权方式

1、声明的顺序对优先级的影响

 <style>
        h1 {
            color: violet;
        }
        h1 {
            color: red;
        }
    </style>
    <h1>php</h1>

效果图

2、选择器的类型对优先级的影响

 <style>
        .php {
            color: violet;
        }
        h1 {
            color: red;
        }
    </style>
    <h1 class="php">php</h1>

3、优先级计算公式
[id选择器的数量，类选择器的数量，标签选择的数量]；[0 ,0 ,0];

<style>
      html body h1 {
            color: rgb(20, 23, 32);
        }
        /* [0,0,3] */
        body h1 {
            color: violet;
        }
        /* [0,0,2] */
        h1 {
            color: red;
        }
        /* [0,0,1] */
        h1.php {
            color: salmon;
        }
        /* [0,1,1] */
        .php {
            color: salmon;
        }
        /* [0,1,0] */
        h1#p.php {
            color: rgb(30, 209, 45);
        }
        /* [1,1,1] */
        #p.php {
            color: rgb(201, 157, 15);
        }
        /* [1,1,0] */
        #p {
            color: rgb(10, 177, 243);
        }
        /* [1,0,0] */
    </style>
    <h1 class="php" id="php">php</h1>

效果图

属性的简写

1、字体
font-size/line-height 大小/行高;
font-famil 字体;
font-style 样式;
font-weight 粗细;
简写：font:样式粗细大小/行高字体；

字体图标小案例

<style>
        .iconfont.icon-shouye {
            font-size: 5em;
        }
        .iconfont.icon-sousuo {
            font-size: 5em;
        }
    </style>
<body>
    <span class="icon iconfont icon-shouye"></span>
    <span class="icon iconfont icon-sousuo"></span>
</body>

效果图

2、背景
background标签
background-color：背景颜色
background-image：背景图片;url();
background-repeat：重复；no-repeat repeat-x repeat-y;
background-size：大小;
background-position：位置;0 0;方位名词 top center bottom；
简写：background:颜色图片重复位置；

盒模型

1、边框border
简写：htmlborder:1px solid #ccc;
2、内边距：padding：上右下左(背景色会自动扩展到padding 将背景色裁切到padding backgroud-clip:content-box)
简写html padding:1px 2px 3px 4px

 <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: cyan;
            box-sizing: border-box;
        }
        .box {
            /* border-top-width: 5px;
            border-top-style: solid;
            border-top-color: red; */
            /* 简写 */
            border-top: 5px solid red;
            border-bottom: 10px solid blue;
            border: 1px solid #ddd;
        }
        .box {
            padding: 5px 10px 15px 20px;
            background-clip: content-box;
        }
    </style>
<body>
    <div class="box"></div>
</body>

效果图

当左右相等，上下不相等使用三值语法上左右下
当左右相等，上下相等使用二值语法上下左右
当四个方向都相等，使用单值语法；
3、外边距：控制多个盒子之间的排列间距
语法和padding一样；
margin:上下左右；

1216CSS优先级

伪类选择器状态匹配

选择器的优先级

选择器的提权方式

属性的简写

字体图标小案例

盒模型

更多相关文章

随机推荐

1216CSS优先级

伪类选择器 状态匹配

选择器的优先级

选择器的提权方式

属性的简写

字体图标小案例

盒模型

更多相关文章

随机推荐

伪类选择器状态匹配