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

通用

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

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

子选择器(重要)

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

后代选择器(重要)

  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. }
  5. /*#a后面的全体兄弟div*/
  6. #a ~ div{
  7. border:1px solid red;
  8. }

交集和并集选择器

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

**

否定

not(简单选择器),里面不支持组合

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

**

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

伪元素

before和after

默认是行内元素

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

**

输入框

placeholder

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