前端css选择器

By | 2020年6月3日

从零开始的前端生活--css基础

选择器

选择器是用来选择对应的html元素。

  • 类选择器 以" . "为开头的选择器,很多元素可以共用同一个类选择器

  • ID选择器 以" # "为开头的选择器。一般指向唯一元素

  • 属性选择器 含有[] 的选择器

    <span class="item one">1</span>
    <span class="item">2</span>
    <span class="item three">3</span>
    <span class="item">4</span>
    <span class="item">5</span>
    span[class="item"] { // 属性选择器,选择类名为item,当然不仅仅是class,只要是属性都可以,例如input的type
         color: red;    //当class的值等于item时,字体设置为红色
    }

     

    [ attr ] 选中包含某个属性的元素

    [ attr = value ] 选中属性值等于某个值的元素

    [ attr ~= value ] 选中某些元素的属性值attr 含有value 这词汇

    [ attr ^= value ] 选中属性值以 value 开头的元素

    [ attr $= value ] 选中属性值以value结尾的元素

    [ attr *= vlalue ] 选中属性值包含value的元素

    [ attr |= value] 选中以指定值开头的元素,该值为完整的单词

  • 伪类选择器

    一般是前有:的选择器

    :active 选中被激活的元素
    :focus 选中聚焦的元素
    :hover 选中鼠标悬浮在上面的元素
    :link 向未被访问的连接添加样式
    :visited 向已被访问的连接添加样式
    :first-child 向元素的第一个子元素添加样式
    :lang 向带有lang属性的元素添加样式
    :empty 选中里面无内容的元素

    <
    input type="text"> <input type="text"> input:focus { // 选择 聚焦的 表单 color: red; }

    注:empty是选中无内容的元素,如<div></div>这种,不会被他的伪元素内容所左右。

    focus

  • 伪元素选择器

:: first-line 向文本的首行添加样式
:: first-letter 向文本的第一个字母添加样式
:: before 在元素的前面添加内容
:: after 在元素后面添加内容
 .after::after {
        content: "";// after 和 before 要有content
        width: 10px;
        height: 10px;
       background-color: red;
       display: block;
  }

 

 

关系选择器

- 后代选择器              空格连接 比如:div  p   就是选择div里面的p标签
- 相邻后代选择器(子类选择器) 仅仅选择合乎规则的儿子元素,孙子和重孙就没有选择了(与后代选择器区别)> 连接      
- 兄弟选择器             选择当前元素==后面==的所有的合乎规则的兄弟元素 ~ 连接
- 相邻兄弟选择器       选择当前元素相邻的那个合乎规则的兄弟元素 用 + 连接

请关注公众号获取更多资料

发表评论