☆前端☆---css选择器的复习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种导入css的方式</title>
    <!--内部导入-->
    <style>
        body {
        margin: 0;
        }
    </style>
    <!--外部导入-->
    <link rel="stylesheet" href="选择器的复习.css">
</head>
<body>
<!--行内样式-->
<p style="color: red">这是一个有颜色的标题</p>
</body>
</html>

/*注释是代码之母 这就是单行注释*/
/*这是一个多行注释
多行注释
123
*/

/*css有叫做层叠样式表 每一个css 都由 两部分组成 第一是 选择器  第二是 声明 声明有分为属性 和 值*/

/*基本选择器分为 标签选择器/元素选择器  id选择器  类选择器 和 通用选择器 下面一以介绍*/

/*标签选择器/元素选择器*/
div {
    color: red;
}

/*id选择器*/
#id {background: red}

/*类选择器*/
.class {
    font-size: 50px;
}

/*通用选择器*/
* {font-weight: bold}


/*然后就是 分组选择器 分为 儿子选择器 后代选择器 毗邻选择器 弟弟选择器 */

/*后代选择器*/
/*指定 div 下所有的 span*/
div span {color: red}

/*儿子选择器  div 下一级的所有的 span*/
div > span {color: red}

/*毗邻选择器 紧挨着 div标签后的标签*/
div + span {color: red}

/*弟弟选择器 div 同级标签*/
div ~ span {color: red}


/*属性选择器 分为 具有某个元素名 具有某个元素名 和 值 具有某个 元素名 和 值 和 标签   看到中括号 就反应是属性选择器*/

[title] {color: red}

[title='234'] {color: red}

input [title='234'] {color: red}
/*分组与嵌套  分组就是 相同的选择器 不同的标签   嵌套就是 不同的选择器 放在一起*/
/*分组*/
div,span,p {color: red}
/*嵌套*/
#id, .class, div span {
    color: red;
}

/*伪类选择器 */
/*标签 : 加样式 */
a:link  {color: red} /*未访问 链接颜色*/

a:hover {color: red} /*鼠标移动到标签上*/

a:active {color: red} /*选定链接*/

a:visited {color: red} /*已经访问的链接 */

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

/*伪元素选择器 */
p:first-letter {font-size: 50px; color: red;}

/*在每个<p>元素之前插入内容*/
p:before {
  content:"$";
  color:red;
}

/*在每个<p>元素之后插入内容*/
p:after {
  content:"?";
  color:blue;
}

☆前端☆---css选择器的复习

猜你喜欢