html基本选择符的使用

时间:2021-03-28 16:50:10
一、选择符在运用在CSS设计样式时对HTML的指定有至关重要的作用!
二、研究
普通选择符:
1、类型选择符:它可以选择同一个类型的元素!
例如:h1,h2 {
             color:red;
            }
可以对多个元素同时选择!
2、属性选择符:它可以根据元素的属性去选择!可以做到任何,全选!
例如:* {
           color:red;
        }
3.类选择符/ID选择符:特殊的属性选择符
.a {
    color:red;
  }
#a {
     color:red;
   }
结构选择符:
1.包含选择符(后代选择符):div p ul li a{…}表示一个div中的p中的ul中的li中的a。~~~^_^~~~ 选择符之间的空格是至关重要的!
2.子选择符:子元素选择符仅仅能选择某个元素的直接子元素(嵌套多层的后代不能被选择),其基本形式是 选择符1>选择符2.
3.相邻选择符:相邻元素选择符顾名思义就是选择相邻的元素。其一般形式为 b+p(对下相邻,而不对上相邻)
4.兄弟选择符:b~p不强制紧邻,四海之内皆兄弟的意思!会选择b以下的所有p元素。
伪对象选择符:
1、first-letter {
                 效果
               }
这是针对文本第一个字的修改,注意此为块元素的属性,如果是行内元素需要转化为块元素之后方可使用。该伪类常被用来配合font-size属性和float属性制作首字下沉效果。
2、first-line {
                效果
             }
这是针对第一行文字的设置,同是块元素。
3、placeholder=” “
改变输入框中占位符的颜色
伪类选择器:
1、a:link {
             效果
           }
鼠标点击之前的状态
2、a:hover{
             效果
          }
鼠标放上去悬空时的状态
3、a:active {
            效果
            }
鼠标点击时的状态
4、a:visited{
             效果
             }
鼠标点击后的状态
5、a::selection {
             效果
             }
设置选中的效果,增加了用户体验!可在复制文字时使用!