前端css选择器

从零开始的前端生活--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>这种,不会被他的伪元素内容所左右。

  • 伪元素选择器

:: 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标签- 相邻后代选择器(子类选择器) 仅仅选择合乎规则的儿子元素,孙子和重孙就没有选择了(与后代选择器区别)> 连接      - 兄弟选择器              选择当前元素==后面==的所有的合乎规则的兄弟元素 ~ 连接- 相邻兄弟选择器       选择当前元素相邻的那个合乎规则的兄弟元素  用 + 连接
(0)

相关推荐

  • 小白入门你教程CSS选择器

    CSS越来越重要是大家中所周之的,但是还有很多人不知道CSS有哪些基本选择器和高级选择器?下面我们来总结一下. CSS有哪些基本选择器和高级选择器? ID选择器>类选择器>标签选择器 行内 ...

  • css选择器有哪些, 选择器的权重优先级

    特殊性 css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源.这个过程就称为层叠.--< ...

  • css 选择器

    CSS 选择器 一.常用选择器 元素选择器 p {} id 选择器 #name {} class 类选择器 .box {} 二.复合选择器 交集选择器 p.red {}.box.red {} 选中同时 ...

  • 前端开发选择器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  • CSS——选择器(三大特性)

    一.继承性 1.基本介绍 #1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性 #2.注意: 1.只有以color.font-.text-.line-开头的属性才可以继 ...

  • CSS选择器区别

    "竞争永远只有一个冠军,但我们依然可以选择做自己的盖世英雄.赶快披上漂亮的CSS外衣,好好表现自己一番吧." --有心人做有心事哦,晚安EmilyChen! (一)单一 [1]属性 ...

  • 前端CSS五中元素定位类型

    元素想通过底部.顶部.左侧.右侧属性定位是必须先设定position的属性值 posistion属性的五个值:static.relative.fixed.absoulte.sticky static定 ...

  • CSS选择器的优先级

    常用 CSS选择器 查看地址(https://www.cnblogs.com/hleisurely/p/12836777.html) 1.选择器的优先级 !important的优先级别最高 权重值为1 ...

  • CSS选择器

    标签选择器 例如:`p`.`a`.`h[1,6]`.`span`.`div`... 类选择器(class) class 选择器以 "." 来定义. 如:.id1{样式属性:值;} ...