CSS 样式、选择器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <!-- 外部样式，写在.css文件中，使用link引入 -->
    <link href="xxx.css" type="text/css" rel="stylesheet" />

    <!-- 内部样式 -->
    <style>
      /* css注释 */
      p{font-size: 20px;color: red}    
    </style>

  </head>

  <body>
    <!-- 行内样式 -->
    <p style="font-size:20px; color:red">hello</p>
  </body>

</html>

.css文件中不加style标签，直接写css样式。

内部、外部样式的语法：选择器 {属性名1：属性值1; 属性名2：属性值2}
属性之间分号隔开

css选择器


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
}

带冒号的选择器中，有4个伪元素:first-letter、:first-line、:before、:after，其它都是伪类。伪元素可以使用单冒号，也可以使用双冒号
:before <=> ::before
:after <=> ::after

选择器可以搭配使用

css样式的优先级

先看方式，行内样式优先级最高，内部样式、外部样式优先级相同，看link 、style元素的顺序，靠后的优先级高（后渲染的样式会覆盖之前的样式）。
如果方式相同（都是内部|外部样式），看选择器。优先级id选择器最高，类选择器次之，标签选择器最低（定位越具体、详细，优先级越高）。

chy_18883701161

原创文章 18 获赞 2 访问量 1618

关注私信

目录

css的3种样式

css选择器

css样式的优先级

猜你喜欢