zoukankan      html  css  js  c++  java
  • Css 选择器总结

    选择器

    .class

    类对应的元素。

    #id

    对应的id元素。

    *

    全部元素

    div{}

    对应的标签

    div,p{}

    全部的div和p

    div p{}

    div下全部的p标签

    div>p{}

    div下的第一代子标签。

    div+p{}

    仅仅作用于div后一个p,假设后一个不是p则没有作用效果。

    p~ul{}

    选取同一个父元素的p之后全部的ul。


    a[target]

    作用于全部带target属性的a标签。

    a[target=_blank]

    作用于全部target属性值为_blank的元素。

    [title*=flower]

    匹配title中包括flower的元素。应用范围更广。

    [title~=flower]

    title中包括flower的对应元素。强调一整个的单词。

    a[src$=".pdf"]

    匹配属性src以.pdf结尾的a标签。


    [lang^=en]

    匹配以en开头的元素,不一定是单词。应用更广,比方en遇到enn匹配成功。可是lang|=则不成功。

    [lang|=en]//|=以...开头

    lang规定了元素的语言。

    |=选取以en开头的对应的元素。

    |=之后跟的是单词,通常应用于lang。

    p:lang(en)//lang选择器

    选择lang属性以en开头的p元素。

    a:link

    :link用于选取未訪问过的链接的元素。

    a:visited

    :visited用于选取訪问过的链接的元素。

    a:active

    :active选取活动链接时的状态,活动链接指的是点击后即为活动,能够按下鼠标不松开查看效果。

    a:hover

    :hover适用于全部元素,设置鼠标浮动在上面时的效果。

    input:focus

    当获得焦点时的状态,即点击输入框要用键盘输入时。

    p:first-letter

    为段落中的首字母设置效果。

    p:first-line

    为段落中的首行设置效果。

    p:first-of-type

    选取身份为父元素的首个p元素。

    p:last-of-type

    选取身份为父元素的最后一个p元素。

    p:only-of-type

    假设作为唯一的p子元素,则触发状态。

    p:nth-of-type(2)

    第二个p元素。

    p:nth-last-of-type(2)

    与上同理,倒着数。

    p:first-child

    选取身份为父元素的首个子元素的p标签。

    p:last-child

    最后一个子元素,且为p标签。


    p:only-child

    作为唯一的子元素。

    p:nth-child(2)

    作为父元素的第二个子元素,是p标签,则触发。

    p:nth-last-child(2)

    与上同理。从最后一个元素開始计数。

    p:before

    在每一个p元素前插入内容。

    p:after

    在每一个p元素之后插入内容。

    :root

    设置根元素。即html文档的属性。

    p:empty

    没有子元素的p元素。

    :target

    当前活动的锚,锚是本页面跳转的链接,活动的猫指的是点击锚点转到时被转到的地方被觉得是活动的。

    :enabled

    指示已启用的。经常使用于表单上。

    :disabled

    指示未启用的。同上。

    :not(p)

    除了p元素的全部元素

    ::selection{}

    为页面上已选中的文字等设置样式。




  • 相关阅读:
    Centos 安装Apache软件
    简单工厂模式和策略模式的差别
    ASCII对比表
    谋哥:这个时代没有比程序猿更适合创业
    Android 自己主动化測试(3)<monkeyrunner> 依据ID查找对象&touch&type (python)
    Java学习笔记七(目录操作)
    我读经典(7):读《程序猿生存定律》有感
    SELECT语句逻辑运行顺序,你知道吗?
    Qt Creator新安装后运行一个程序后,出现错误:Error while building/deploying project dict-qt (kit: Desktop Qt 5.10.0 MinGW 32bit) When executing step "qmake"
    软件的各版本分类介绍
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/8446585.html
Copyright © 2011-2022 走看看