6_CSS样式_选择器

插入样式的三种方法

  1. 内联样式表(行内)
  2. 内部样式表(style中)
  3. 外部样式表
    • 创建一个外部样式表
    • 在head中使用link元素插入样式表
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" media="screen" title="no title">
  • 单一元素的多个属性之间用分号隔开;若只有一个可以省略
  • 多个元素之间用逗号隔开
  • 如果值为若干单词,则要给值加引号;除了这种情况外其他时候不可以加引号
  • css代码的注释
  • 样式的优先顺序:
    1. 设计者设计的样式>浏览器用户自定义的样式>浏览器自设的样式
    2. 强制优先级:!important
    3. 行内(内联)样式
    4. 内部样式:style中的样式
    5. 外部样式
  • 层叠、继承、冲突
  • 外观样式--比如字体、颜色可以继承;而布局有关的样式不可以继承,比如边框等
  • 可以在同一个 HTML 文档内部引用多个外部样式表。

CSS选择器

  1. 常用选择器

    • 通用选择器:“*” *{color: red}
    • 元素选择器 div{background: blue}
    • id选择器:前面有一个 # #div1{background: blue}
    • 类选择器:前面加符号 . .class{color: yellow}
    • 给一个元素加上多个类名 h3.class{background: rgb(207, 94, 87)}
    • 指定某一特定的类 ``
  2. 属性选择器

    • E[att] :选择具有att属性的E元素。需要选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。

    input[value][style]{background: rgb(24, 65, 82)}

    可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

    • E[att="val"]:选择具有att属性且属性值等于val的E元素。进一步缩小选择范围,(只选择有特定属性值的元素。)

    input[value="vip1"]{background: rgb(43, 184, 11)}

    • E[att~="val"]:选择具有att属性且属性值有多个,其中一个的值等于val的E元素。

    input[style~="15px"]{background: red}

    • E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

    p[lang|="en"]{background: rgb(182, 60, 215)}

    • E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。

    input[value^="vi"]{background: rgb(139, 201, 123)}

    • E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。

    input[value$="1"]{background: rgb(139, 201, 123)}

    • E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。

    input[value*="i"]{background: rgb(139, 201, 123)}

  3. 关系选择器

    • 后代选择器(包含选择器)ul li{}:后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

    ul li{color: red}

    • 子元素选择器ul>li:与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素,缩小了选择范围

    ul>li{border: 1px solid}

    • 相邻选择符:E+F:选择紧贴在E元素之后F元素。(一个)

    h2+p{color: red}

    • 兄弟选择器E~F:选择E元素所有兄弟元素F。(只可以选择到之后的元素)(所有)

    h2~p{color: red}

  4. 伪元素选择器

    • E:first-letter/E::first-letter 设置元素内的第一个字符的样式。

    p::first-letter{color: red}

    • E:first-line/E::first-line设置元素内的第一行的样式。

    p::first-line{font-size: 30px}

    • E:before/E::before在每个 E元素的内容之前插入内容。用来和content属性一起使用

    a::before{ content: "点击" }

    • E:after/E::after在每个E元素的内容之后插入内容。用来和content属性一起使用

    a::after{ content: url(../../..png) }

    • E::selection设置对象被选择时的颜色。

    a::selection{background: red}

  1. 伪类选择器_结构伪类选择器

    • E:first-child 父元素的第一个子元素E。

    li:first-child{color: red}

    • :root:选择文档的根元素。

    :root{background: rgb(34, 56, 173)}

    • E:last-child:最后一个子元素E。

    li:last-child{color: red}

    • E:only-child:仅有的一个子元素E。(只有一个子元素)

    li:only-child{color: red}

    • E:only-of-type:只有一种类型的子元素。(只有一个P元素)

    p:only-of-type{color: rgb(145, 102, 147)}

    • E:nth-child(n):元素的第n个子元素E。

      • 可以直接用数值:比如2
      • 可以用奇数(odd)偶数(even)
      • 可以用公式3n

      h3:nth-child(2){color: red}

      #div1>h3:nth-child(2){color: red}

      h3:nth-child(odd){color: red}

      h3:nth-child(even){color: red}

      h3:nth-child(3n){color: red}

      tr:nth-child(3n+1){color: red}

    • E:nth-last-child(n):匹配父元素的倒数第n个子元素E。

    tr:nth-last-child(3n+1){color: red}

    • E:first-of-type :匹配同类型中的第一个同级元素E。

    h3:first-of-type{color: rgb(176, 76, 240)}

    • E:last-of-type:匹配同类型中的最后一个同级元素E。

    p:last-of-type{color: rgb(142, 65, 66)}

    • E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。

    p:nth-of-type(2){color: rgb(142, 179, 13)}

    • E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。

    p:nth-last-of-type(1){color: rgb(85, 20, 173)}

    • E:empty :匹配没有任何子元素(包括text节点)的元素E。

    div:empty{width: 300px;height: 300px;background: rgb(74, 210, 32)}

  2. 伪类选择器_UI伪类及其他选择器

    • E:active 向被激活的元素添加样式。

    a:active{background: rgb(180, 131, 230)}

    • E:hover 当鼠标悬浮在元素上方时,向元素添加样式。

    a:hover{background: rgb(85, 246, 125)}

    • E:link 向未被访问的链接添加样式

    a:link{color: rgb(187, 150, 150)}

    • E:visited 向已被访问的链接添加样式。

    a:visited{color: rgb(6, 245, 66)}

    • E:focus 向拥有键盘输入焦点的元素添加样式。

    input:focus{background: rgb(161, 47, 231)}

    • E:lang向带有指定 lang 属性的元素添加样式。

    p:lang(en){background: red}

    • input:checked 选择每个被选中的input元素。

    input:checked{width: 200px;height: 200px}

    • input:disabled 选择每个禁用的input元素

    input:disabled{width: 100px;height: 100px}

    • input:enabled 选择每个启用的input元素。

    input:enabled{background: rgb(185, 52, 237)}

    • 、 #E:target 选择当前活动的元素(某个被链接的元素)。

    • :not(E) 选择E元素之外的每个元素。

    :not(input){color: yellow}

选择器的优先级问题

  1. 原则上:元素选择器<类选择器< ID选择器<行内样式
  2. 谁指向精确谁的优先级高
  3. 并列的话谁在后边谁优先级高
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容