码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • CSS选择器大全48式

    image.png

    HTML系列：

    • 人人都懂的HTML基础知识-HTML教程
    • HTML元素大全(1)
    • HTML元素大全(2)-表单

    CSS系列：

    • CSS基础知识筑基
    • 常用CSS样式属性
    • CSS选择器大全48式
    • CSS布局秘籍(1)-任督二脉BFC/IFC
    • CSS布局秘籍(2)-6脉神剑
    • CSS动画-transition/animation
    • CSS处理器-Less/Scss

    00、CSS选择器

    CSS的选择器分类如下图，其中最最常用的就是基础选择器中的三种：元素选择器、类选择器、id选择器。伪类选择器就是元素的不同行为、状态，或逻辑。然后不同的选择器组合，基于不同的组合关系，产生了6中组合关系选择器。

    image

    01、基础选择器（5）

    1.1、通配选择器：*{}

    针对所有HTML标签全部适用，选择器名=星号*（通配符），一般只做初始化使用。在 CSS3 中，星号 (*) 可以和命名空间组合使用，如 ns|*{}。

    		/* 通用选择器，针对所有标签 */
    		* {
    		    color: black;
    		    font-size: 15px;
    		    box-sizing: border-box; margin: 0px; padding: 0px;
    		    font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", Heiti, "黑体", SimSun, "宋体", sans-serif;
    		}

    1.2、元素选择器：元素名{}

    用元素名称作为选择器名称，如p、h1、div、img等，对作用域内所有该标签元素生效，所以常用来描述某一元素的共性。

    		hr {
    		    margin: 32px 5px;
    		}
    		h1 {
    		    background-color: lightblue;
    		    text-indent: 0.5em;
    		}

    1.3、类选择器：.类名{}

    定义时前面加点.类名，在标签的属性“class”使用该样式，这应该算是最常用的选择器了。

    		/* 类名class选择器 */
    		.particle{
    		    font-size: 18px;
    		    font-family: 楷体;
    		}
    		.pindent{
    		    text-indent: 2em;
    		}
    		<p class="particle pindent">一段文字内容-sectionp>

    类选择器可以给所有需要的元素使用，可同时给多个元素使用，应用广泛。

    • 类名字母开头（小写），不能以数字开头。
    • 同一个标签可以用多个类选择器，空格隔开。基于此，一般会将样式抽象、分类为多个类样式，便于复用。

    1.4、id选择器：#id{}

    用标签的id作为选择器名称，加井号“#”，针对作用域内指定id的标签生效，所以只能使用一次。

    • ID是标签的唯一标识，不能重复。如果id重复，样式其实是会生效的，但查找元素（document.getElementById(id)）只会返回第一个。
    • ID字母开头（小写），不能以数字开头。
    		/* id选择器 */
    		#a1{
    		    color:blueviolet;
    		    font-size: 16px;
    		    text-decoration-line:underline ;
    		}

    1.5、属性选择器：[属性=value]{}

    元素都有属性，属性选择器是在其他选择器的基础上加上属性的筛选，用来筛选有特定属性、或属性值的元素，css3特性。这里的属性值匹配是大小写敏感的，结尾加上字符i（li[title*= "a" i]），则会忽略大小写敏感。

    属性选择器 示例 描述
    [attr] li[title] .cli[title] 包含属性，筛选li元素且有属性title的元素
    [attr=value] li[title="a"] 包含属性+值相等，筛选li元素+title属性，且值为“a”的元素
    [attr^=value] li[title^= "a"] 属性值开头字符：开头字符匹配
    [attr$=value] li[title$= "a"] 属性值结尾字符：结尾字符匹配
    [attr*=value] li[title*= "a"] 属性值包含字符：包含字符匹配
    [attr~=value] li[title~="a"] 包含属性-值包含（完整单词），注意是值包含（如多个样式名，空格隔开的多个值），不是字符匹配包含，空格隔开的字符也算。
    [attr|=value] li[title|="a"] 包含属性-值开头（完整单词），同上，属性值是a，或开始为a且后面跟连字符-（中划线） 
    		<ul>
    		  <li title="a">item1：ali>
    		  <li title="a b">item2：a bli>
    		  <li title="c a b">item2li>
    		  <li title="a-b" class="cli">item4：a-bli>
    		  <li title="abc" class="cli">item5：abcli>
    		  <li title="cab" class="cli">item6：cabli>
    		  <li title="cba" class="cli">item7：cbali>
    		  <li title="cbA1" class="cli">item8：cbA1li>
    		ul>

    image.png

    02、伪类选择器（43）

    2.1、伪类选择器:

    伪类是选择器的一种，用于选择处于特定状态的元素。比如第一个元素、最后一个、奇数序列，或者是当鼠标指针悬浮时的状态。

    伪类选择器开头为冒号 ：，如a:hover{} 表示a元素鼠标悬浮时的状态（样式）

    和用户交互有关的伪类，也叫用户行为伪类，或叫做动态伪类，比如:link、:active、:visited、:hover。

    交互状态伪类 描述（5）
    :link 匹配未曾访问的a链接。注意遵循 LVHA 的先后顺序:link >:visited > :hover > :active
    :visited 匹配已访问a链接 (基于存在于浏览器本地的历史纪录)，（visited /'vɪzɪtɪd/ 访问 ）
    :hover 鼠标悬浮时：当用户悬浮到一个元素之上的时候匹配。(/ˈhɒvə(r)/ 盘旋、悬停)
    :active 鼠标按下时：在用户激活元素的时候匹配，一般被用在 和
    :focus IE8 得到焦点（光标）：当一个元素有焦点的时候匹配，一般是输入表单。

    📢注意顺序：先a样式，然后是他的LVHA。实际项目中，的:link、:visited有时候会省略，合并到a样式中。

    （表单）状态伪类 描述（11）
    :read-only IE🚫 readonly：匹配用户不可更改的元素，具有 readonly 属性的 元素，也包括不能被用户编辑的元素
    :checked IE9 checked：匹配处于选中状态的radio()、checkbox或
    :disabled IE9 disabled：匹配被禁用的元素，如input的disabled。
    :enabled IE9 启用状态：匹配处于开启状态的用户表单元素。
    :required IE10 required：匹配设置了required必填的 表单元素，如设置了required属性的，