2. 技术
    3. CSS选择器(更新）

    CSS选择器(更新）

    技术2024-07-07  80

    什么是CSS选择器（selector）

    按照一定的规则选出符合条件的元素，为之添加CSS样式

    选择器种类

    一：通用选择器

    universal selector

    * { background-color: red; } 一般用来所有元素做一些通用设置 比如：内外边距 效率较低，尽量不适用

    二:元素选择器

    type selector

    代码

    div { color:red; margin: 0; padding: 0; }

    三：类选择器

    class selector

    一个元素可以有多个类，用空格隔开

    类的名字规范

    尽量见名知意当多个单词时 -连接： large-font_连接：large_font驼峰：largeFont

    代码

    <body> <div> Hello World! </div> <h2 class='title'>你好啊！</h2> <span class='span'>你不好啊！</span> </body> <style> div { color: red; } .title { color: blue; } .span { font-size:18px; margin: 0; padding: 0; } </style>

    四：id选择器

    id selector

    id名称在同一个页面不要重复

    代码

    <body> <div id="header">头部</div> <div id="main">内容</div> <div id="footer">尾部</div> </body> <style> #header { font-size: 20px; color: red; } #main { font-size: 18px; color: blue; } </style>

    五：属性选择器

    格式

    [title]

    所有有title属性的标签

    [title=“div”]

    title属性为div的标签

    [title*=“one”]

    title属性包含div的标签

    [title^=“one”]

    title属性以one开头

    [title$=“one”]

    title属性以one结尾

    [title|=“one”]

    title属性 恰好等于 one 或者 以单词 one 开头 且 后面紧跟 连字符- 的元素

    一般用在lang属性上面

    [title~=“one”]

    title属性值 包含 单词 one 的元素（单词one与其他单词之间必须用 空格 隔开）

    六：组合|后代 选择器 （|只是一个标签）

    格式

    div元素里面的span元素(包括直接、间接子元素)

    <head> <style> /*选中 div下面的span元素（直接和间接元素）*/ div span{ font-size: 20px; color: red; } </style> </head> <body> <span>文字1</span> <div> <span>文字2</span> <p> <span>文字3</span> </p> <div> <span>文字4</span> </div> <span>文字5</span> </div> <div> <a href="#"> <span>文字6</span> </a> </div> </body> <!--2,3,4,5,6都可以被选中-->

    七：子选择器( > 只是一个标签)

    格式

    div元素里面的直接子元素

    div > span { font-size: 30px; color: red; }

    八：相邻兄弟选择器

    div元素后面紧挨着的p元素

    div+p{ color: red; } <div> <p> 哈哈哈哈 </p> <div> <p> 嘻嘻嘻 </p> </div> </div> <!--哈哈哈哈才会变红-->

    九：全兄弟选择器

    div元素后面的p元素（且div、p元素必须是兄弟关系）

    div~p { color: red; } <span>文字1</span> <p> 文字2 </p> <div> 文字3 </div> <div> <p> 文字4 </p> </div> <p> 文字5 </p> <p> 文字6 </p> <!--文字5，6-->

    十：交集和并集选择器

    交集

    同时符合两个条件的元素：div元素、class值有one

    div.one { color: red; } <div class="one"> 文字1 </div> <div class="two"> 文字2 </div> <p class="one"> 文字3 </p>

    并集

    所有的div元素+所有的class值有one的元素+所有title属性值等于test的元素

    div, .one, [title="test"] { color: red; }

    伪类

    pseudo-classes

    常见的伪类

    动态伪类(dynamic psudo-classes)

    :link、:visited、:hover、:active、:focus

    a:link

    未访问的链接

    a:visited

    已访问的链接

    a:hover

    鼠标挪动到链接上

    a:active

    激活状态的链接

    a:focus

    焦点状态

    其他元素也可以使用

    结构伪类(stuctural pseudo-classes)

    :neh-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()

    :first-child、:last-child、:first-of-type、:last-of-type

    :root、:only-child、:only-of-type、:empty

    否定伪类(negation pseudo-classes)

    :not()

    目标伪类(target pseudo-classes)

    <style> :target { color: red; } </style>

    渲染选中的锚点CSS

    代码/learninghtml-v1/伪类/01-目标伪类.html

    语言伪类(language pseudo-classes)

    元素状态伪类(UI element states pseudo-classes)

    <style> :disabel { color: red; } </style> <butotn disable>我是按钮</butotn>

    代码/learninghtml-v1/伪类/02-元素状态伪类.html

    伪元素

    Processed: 0.014, SQL: 9