按一定的规则，找出符合条件的元素，然后应用样式
**

通用

  1. <style type="text/css">
  2.   * {
  3.     margin: 0;
  4.     padding: 0;
  5.   }
  6. </style>

所有元素都使用同一个样式，*相当于所有
一般用于清除默认的一些间距样式，不过会把原来没有这些样式的也加上，影响效率，因此很少用，主要用于特定的元素

标签

  1. <style type="text/css">
  2.   标签名{
  3.     CSS样式;
  4.   }
  5. </style>

标签名，如html、body、h1、p、img等，选择器设置好样式，那么对应选择器的标签自动应用样式

类

  1. <head>
  2.     <style type="text/css">
  3.         .类名1{       /*注意前面有个英文园点的*/
  4.             样式;
  5.         }
  6.         标签名 .类名2{       /*注意前面有个英文园点的；先找标签，在标签里面再找类*/
  7.             样式;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.     <span class="类名1 类名2">文本</span>
  13. </body>

类选择器可以自定义名称，但是不能为中文。文档中可以使用多次，且可以多个样式组合使用。

类名尽量见名知意，多个单词用-连接（推荐）或 _ 连接，要有统一的规范

id

  1. <head>
  2.     <style type="text/css">
  3.         #id名{       /*注意前面有个英文的井号*/
  4.              样式;
  5.         }
  6.     </style>
  7. </head>
  8. <body>
  9.     <span id="id名">文本</span>
  10. </body>

id选择器可以自定义名称，但是不能为中文。文档中只能使用1次，不可组合使用

一般用于组合，如#header .title{ }

属性选择器

  1. [title]{ /*带有 title 属性的所有元素设置样式.*/
  2.     color:red;
  3. }
  5. h1[style]{ /*带有 title 属性的所有h1元素设置样式.*/
  7. }
  9. [title="W3School"]{ /*带有 title 属性且值为W3School的所有元素设置样式.*/
  10.     border:5px solid blue;
  11. }
  13. input[type="text"]{ /*匹配 type="text" 的所有input元素设置样式*/
  14.   width:150px;
  15.   display:block;
  16.   margin-bottom:10px;
  17.   background-color:yellow;
  18.   font-family: Verdana, Arial;
  19. }
  21. input[type^="text"]{   /*匹配属性type属性是以"text"开头的所有元素设置样式*/
  23. }
  25. input[type$="text"]{   /*匹配属性type属性是以"text"结尾的所有元素设置样式*/
  27. }
  29. input[type*="text"]{   /*匹配属性type属性包含"text"的所有元素设置样式，不区分大小写*/
  31. }
  33. [lang|="en"]{   
  34.   /*匹配属性lang属性恰好为"en" 或 "en"开头后面跟"-"的所有元素设置样式，不区分大小写*/
  35.   /*一般用于匹配语言*/
  37. }
  39. input[type~="text"]{   /*匹配属性type属性是包含"text"的所有元素设置样式，"text"和其他用空格隔开的*/
  41. }

======================

子选择器（重要）

  1. /*使class名为food的类选择器，下的子元素li（水果、蔬菜）加入红色实线边框，只作用第一个后代 */
  2. .food > li{
  3.    border:1px solid red;
  4. }
  6. .food > li > p{
  7.    border:1px solid red;
  8. }
  10. /* class名为food下的 */
  11. .food > .abc{
  12.    border:1px solid red;
  13. }

后代选择器（重要）

  1. .food li{
  2.   border:1px solid red;
  3. }

这行代码会使class名为food的类选择器，下的子元素li（水果、蔬菜）加入红色实线边框，作用于所有后代以及后代的后代…

兄弟选择器

  1. /*选择紧挨着id为a的元素下面的同级的div标签*/
  2. #a + div{
  3.   border:1px solid red;
  4. }
  6. /*#a后面的全体兄弟div*/
  7. #a ~ div{
  8.   border:1px solid red;
  9. }

交集和并集选择器

image.png

交集

image.png
文字内容1符合

image.png
文字内容2符合

并集

image.png
所有都符合

=======================

伪类选择器

动态

image.png

它允许给html不存在的标签（标签的某种状态）设置样式，主要是a标签

未访问状态 a:link
访问过后状态 a:visited （访问过后浏览器有缓存，可能变不回未访问的状态。也可以通过变更链接避免）
鼠标放上状态 a:hover
激活状态（鼠标按下但还没弹出） a:active
image.png
image.png
image.png
image.png

image.png

目标（锚点）

image.png
就是锚点选中的那个元素，就是target
image.png

状态

image.png
image.png

image.png

结构

  1. /*属于p元素的第一个子元素*/
  2. p :first-child;  
  4. /*属于p元素的最后一个子元素*/
  5. p :last-child; 
  7. /*作为倒数第3个子元素且是p元素*/
  8. p:nth-last-child(3) 
  10. /*匹配第n个作为子元素的P元素，可以是(2n),(2n+1)，隔行变色的表格;也可以-n+3表示前3*/
  11. p:nth-child(n); 
  13. /*只有一个子元素且是p元素*/
  14. p:only-child; 
  16. /*只有一个类型子元素且是p元素*/
  17. p:only-of-type; 
  19. /* 第3个p元素 */
  20. p:nth-of-type(3) 
  22. /* 倒数第3个p元素 */
  23. p:nth-last-of-type(3) 
  25. /*Html元素*/
  26. :root{}
  28. /*元素内没有内容*/
  29. :empty{}

**

否定

not（简单选择器），里面不支持组合

  1. /*除了不是div的元素*/
  2. :not(div){
  3. }
  5. /*去掉html元素和body元素，真实开发不会这样写*/
  6. :not(html):not(body):not(div){
  7. }

**

======================

伪元素

before和after

默认是行内元素

  1. /*选择每个元素的第一个字母或中文*/
  2. p:first-letter;     
  4. /*选择每个元素的第一行*/
  5. p:first-line;
  7. /*在每个p元素之前插入"abc"，且变成红色，:或::都可以，经常用到*/
  8. p::before{
  9.   content:"abc";
  10.   color:red;
  11. } 
  13. /*在每个p元素之后插入图片，:或::都可以，经常用到*/
  14. p::after{
  15.   content:url("./1.jpg")
  16. }

**

输入框

placeholder 

  1. /*输入框的提示信息样式*/
  2. input::placeholder{
  4. }