CSS 样式、选择器使用方法

转载 Css 3
阅读数: 1007 2023年06月11日

css样式的优先级(无后续修改样式):

1、最高级:行内样式,直接写在标签上面;

2、中级:内部样式和外部样式的“ID选择器”;

3、低级:内部样式和外部样式的“类选择器”;

4、最低级:内部样式和外部样式的“标签选择器”且定位清晰度高;

5、最最低级:内部样式和外部样式的“标签选择器”且定位清晰度低;


p{color: red}  /* 元素选择器 */
.red{color: red}  /* 类选择器 */
#user{color: red}  /* id选择器 */


*{color: red}  /* 通用选择器,给所有元素设置样式 */
h1,.red{color: red}  /* 分组选择器,同时给多个选择器设置样式 */


/* 选中的都是p */
div p{color: red}  /* 后代选择器,p是div的后代就行,不一定要是儿子 */
div>p{color:red}  /* 子选择器,p要是div的儿子 */
div+p{color:red}  /* 相邻兄弟选择器,p是div后面的第一个兄弟 */
div~p{color:red}  /* 后续兄弟选择器,选择div后面所有的p,p要是div的兄弟 */


/* 属性选择器,属性名不引,属性值可引可不引 */
[attr]  /* 含有指定属性的所有元素 */

/* 含有指定属性,且 */
[attr=value] /* 属性值是value */
[attr^=value]  /* 属性值以value开头 */
[attr$=value]  /* 属性值以value结尾 */
[attr*=value]  /* 属性值中包含value */

/* 属性选择器可单独使用,也可以和其它选择器搭配使用 */
button[type="submit"]


/* <a>链接不同时期的样式 */
a:link   /* 未访问过的<a> */
a:hover  /* 鼠标移到<a>元素上 */
a:active  /* 点击<a>时 */
a:visited  /* 访问过的<a> */

/* :hover这个伪类选择器所有元素都可以使用,不局限与<a>链接 */
div:hover


/* 表单元素 */
input:focus   /* 聚焦时 */
input:checked   /* 选中时 */
input:enabled   /* 可用的 */
input:disabled  /* 禁用的 */
input:read-only  /* 只读的 */


/* 空元素指的是没有任何属性、内容的元素,比如<p></p> */
:empty{  }   /* 所有的空元素 */
p:empty{  }  /* 所有空的<p>元素 */


/* 非,除开()中选择器匹配的元素 */
:not(p)    /* 选择不是<p>的所有元素 */


/* type系列 */
p:first-of-type  /* 同级别中的第一个<p> */
p:nth-of-type(n)   /* 同级别中的第n个<p> */
p:nth-last-of-type(n)   /* 同级别中的倒数第n个<p> */
p:last-of-type   /* 同级别中的最后一个<p> */
p:only-of-type   /* 同级别中唯一的一个<p> */

/* 同级别指的是DOM的每一级,示例 */
p:first-of-type{color:red}
<body>
    <h1></h1>
    <p></p>   <!--选中-->
    <p></p>
    <div>
        <h2></h2>
        <p></p>  <!--选中-->
        <p></p>
    </div>
</body>


/* child系列,匹配的都是p */
p:first-child   /* p要是其父元素的第一个子元素 */
p:nth-child(n)  /* p要是其父元素的第n个子元素 */
p:nth-last-child(n)  /* p要是其父元素的倒数第n个子元素 */
p:last-child  /* p要是其父元素的最后一个子元素 */
p:only-child  /* p要是其父元素的唯一一个子元素 */

/* 每个级别都会去匹配,示例 */
p:first-child{color:red}
<body>
    <h1></h1>
    <p></p>   
    <p></p>
    <div>
        <p></p>  <!--选中-->
        <p></p>
    </div>
</body>


p:first-letter  /* <p>元素的第一个字符 */
p:first-line  /* <p>元素的第一行 */


/* 伪元素,在p的前|后面添加内容 */
p:before{   
    content: "hello ";  /* 伪元素的内容 */
    font-size: 20px;  /* 设置的样式是给伪元素设置的 */
    color: red;  
}
p:after{
    content:"byebye";
    display: block;  /* 添加的内容默认是行内元素,可以指定为块级 */
    font-size: 20px;
    color: red;
}


/* 使用伪元素清除浮动 */
p:before{   
    content:"";   /* content必需,不添加文本内容时设置为空串 */
    clear: both
}
参考资料
https://blog.51cto.com/u_12462157/3797887
phpriji.cn | 网站地图 | 沪ICP备17015433号-1