CSS语法笔记

对Web有点兴趣，可能它是可视化的，给我带来的成就感更多吧🐷标签不记了，w3school上都有

文章转载

原文链接：Click me
本人也对其做了少些修改

元素

CSS元素分为块、行、行内块三种元素，块元素会独占一行、行元素会紧凑着排列、而行内块就是综合两者在行内排列着块。

行内元素特征：

• 设置宽高无效
• 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间,行内元素尺寸，由内含的内容决定，盒模型中 padding, border 与块级元素并无差异，都是标准的盒模型，但是 margin，却只有水平方向的值，垂直方向并没有起作用。行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。padding设置上下左右都有效，即会撑大空间但是不会产生边距效果。
• 不会自动进行换行


块状元素特征:

• 能够识别宽高
• margin和padding的上下左右均对其有效
• 可以自动换行
• 多个块状元素标签写在一起，默认排列方式为从上至下


行内块状元素特征:

• 不自动换行
• 能够识别宽高
• 默认排列方式为从左到右

以上三种元素可以通过display: ???属性切换类型。

选择器分类

• 基本选择器: 共有 5 个基本选择器，是 CSS 选择器的最为基本的用法。
• 层级选择器: 共有 4 个层级选择器。
• 组合选择器：具有交集和并集两种用法，是将之前基本选择器和层级选择器进行组合。
• 伪类选择器：允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。
• 伪元素选择器：定位所有未被包含 HTML 的实体。

基本选择器

1. 类型选择器（元素选择器）

   div {
        font: 12px;
       }

2. 类（Class）选择器
   类选择器前面是“ . ”，类名对应HTML中的class类

   .demo {
      color: lightcoral;
      font-size: 24px;
    }

3. ID 选择器
   id选择器前面是“ # ”，一个 html 文件中 id 只允许出现一次

   #Demo {
     color: lightcoral;
     font-size: 24px;
   }

4. 通配符“ * ”，为HTML中所有元素添加样式

   * {
     color: lightcoral;
   }

5. 属性选择器

   • [attr] 属性选择器：通过 HTML 元素的 attr 属性名来定位具体 HTML 元素，把所有title属性的元素全部改变。

     [title] {
         color="red";
     }

   • [标签][属性]：将所有特定标签加油特定属性的元素添加样式

     a[href] {color:red;} //对所有加有href的a标签添加样式

   • [标签][属性1][属性2][…]：将同时加有属性1、属性2…的特定标签添加样式

     a[href][title]  {color:red;}

   • 根据具体属性值选择
     除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

     a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

   • 根据多个具体属性选择

     a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

   • 选择 titile 属性包含单词 “flower” 的元素，并设置其样式：

     [title~=flower]
     { 
         background-color:yellow;
     }
     <p title="flower nb">添加成功</p>
     <p title="nb">添加失败</p>

   • 选择 lang 属性值以 “en” 开头的元素，并设置其样式：

     [lang|=en]
     { 
     background-color:yellow;
     }

   • 设置 class 属性值以 “test” 开头的所有 div 元素的背景色：

     div[class^="test"]
     {
     background:#ffff00;
     }

   • 设置 class 属性值以 “test” 结尾的所有 div 元素的背景色：

     div[class$="test"]
     {
         background:#ffff00;
     }

   • 设置 class 属性值包含 “test” 的所有 div 元素的背景色：

     div[class*="test"]
     {
         background:#ffff00;
     }

     优先级

     优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

例如：a.name权重等于a标签权重加上name类名的权重和，其权重大于.name，所以两者同时存在时前者样式生效

权重相同，后来者居上 !important提高到最高优先级

div {
  color: blue !important;
}
.demo {
  color: red;
}
<div class="demo">这是一个测试内容.</div> //最终的颜色为 blue

## 层级选择器 ### 层级选择器

<div id="ancestor1">
  <div id="parent1">
    <div id="child11"></div>
    <div id="child12"></div> 

  </div>
  <div id="parent2">
    <div id="child2"></div>
  </div>
</div>
<div id="ancestor2"></div>

 * 兄弟元素：ancestor1 元素和 ancestor2 元素、parent1 元素和 parent2 元素，以及 child11 元素和 child12 元素。 * 父级与子级元素： * 如果 `` 元素是父级元素的话，那 ancestor1 元素和 ancestor2 元素就是子级元素。 * 如果 ancestor1 元素是父级元素的话，那 parent1 元素和 parent2 元素就是子级元素。 * 如果 parent1 元素是父级元素的话，那 child11 元素和 child12 元素就是子级元素。 * 祖先与后代元素： * 如果 `` 元素是祖先元素的话，那其包含的所有元素都是后代元素。 * 如果 ancestor1 元素是祖先元素的话，那其包含的所有元素都是后代元素。 * 如果 parent1 元素是祖先元素的话，那其包含的所有元素都是后代元素。 ### 层级选择器种类 * 后代选择器 简单来说，该元素的所有后代元素。

div span {
      background-color: lightcoral;
    }
<div>
    <span>Span 1.
      <span>Span 2.</span>
    </span>
  </div>
<span>Span 3.</span>

这样只会影响到div里的span标签，而div外的标签则不会受到影响

* 子级选择器 定位该元素的所有子级元素。并不会影响孙子级元素

<style>
span{
	color: teal;
}
div>span{
	color: violet;
}
</style>

* 相邻兄弟选择器 定位与该目标元素拥有同一个父级元素的**下一个**指定元素 不包括当前元素，只包括后边的元素

<style>
#a+li{
    color: red;
}
</style>
<ul>
    <li id="a">1sadsada</li> <!-- 不会变色 -->
    <li>555555</li><!-- 变色 -->
</ul>

* 普通兄弟选择器 简单来说就是 p~codep 元素之后的元素 定位与该目标元素拥有同一个父级元素的之后任意指定元素

<style>
  span {
    background-color: lightgreen;
  }

  p~code {
    background-color: lightcoral;
  }
</style>
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code> 会变色
<span>And here is a span.</span>

## 组合选择器 ### 组合（并集）选择器 `h1, h2, h3, h4, h5, h6 { color:blue; }` 同时定义多个标签的属性。 ### 组合（交集）选择器

p.cls {
    color: blueviolet;
}
表示把所有class名为cls的p标签都设置成blueviolet颜色

## 伪类选择器

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

### 否定伪类选择器 >:not(selector) { 属性 : 属性值; }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>否定伪类选择器</title>
  <style>
    .fancy {
      text-shadow: 2px 2px 3px gold;
    }

    p:not(.fancy) { /*匹配class名不是fancy的p标签*/
      color: green;
    }

    body :not(p) { /*匹配body中不是p标签的标签*/
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <p>我是一个段落。</p>
  <p class="fancy">我好看极了！</p>
  <div>我不是一个段落。</div>
</body>

</html>

## 伪元素选择器

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

伪元素选择器的语法格式为 `::伪元素`，一定不要忘记 ::。伪元素选择器只能和基本选择器配合使用，并且一个选择器只能使用一个伪元素选择器，如果要为一个选择器增加多个伪元素选择器需要分别编写。 ### before 和 after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a::after{
            content: "→";
        }
        a::before{
            content: "♥";
        }
    </style>
</head>
<body>
    <div>
        <a href="https://antmoe.com">这是一个测试内容</a>
    </div>
</body>
</html>

 ### first-letter ::first-letter 伪元素的作用是为匹配元素的文本内容的第一个字母设置样式内容。 如下示例代码展示了 **::first-letter 伪元素 ** 的用法：

p::first-letter {
  font-size: 130%;
}

### first-line 伪元素 ::first-line 伪元素的作用是为匹配 HTML 元素的文本内容的第一行设置样式内容。 如下示例代码展示了 **::first-line 伪元素 ** 的用法：

.line::first-line{
            background-color: tomato;
        }

### ::selection 伪元素 ::selection 伪元素的作用是匹配用户在 HTML 页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了 **::selection 伪元素 ** 的用法：

p::selection {
    color: gold;
    background-color: red;
}


注意： 只有一小部分 CSS 属性可以用于::selection 伪元素：

• color 属性
• background-color 属性
• cursor 属性
• caret-color 属性
• outline 属性
• text-decoration 属性
• text-emphasis-color 属性
• text-shadow 属性

最后感谢原创！！！支持原创