高亮的博客

# 选择器

# 标签选择器

写HTML标签

<body>
    <p>p标签</p>
</body>

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

# 类选择器

结构需要用class属性来调用class类的意思 语法：.类型{xxx}

<body>
    <p class="p">p标签</p>
</body>

<style>
    .p {
        color: red;
    }
</style>

# id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以“#"来定义。
语法：

#id名 {  
    属性1: 属性值1;    
}

注意：id 属性只能在每个 HTML 文档中出现一次

<body>
    <p id="red">p标签</p>
</body>

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

# 通配符选择器

语法：

* {
    属性1: 属性值1;  
    ...
}

通配符选择器不需要调用， 自动就给所有的元素使用样式，特殊情况才使用

<body>
    <p>标签</p>
    <div>div</div>
    <span>span</span>
</body>

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

# 复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

# 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法： 元素1 元素2 { 样式声明 }

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <ol>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>
</body>

<style>

    ul li {
        color: red;
    }
</style>

# 子元素选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

<body>
    <div class="parent">
        <p>儿子</p>
        <div>
            <p>孙子</p>
        </div>
    </div>
</body>

<style>
    .parent > p {
        color: red;
    }
</style>

# 并集选择器

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明，使用逗号之间连接

    <body>
        <div>
            <p class="zs">zhangsan</p>
            <p class="ls">lisi</p>
            <div>
                <p class="ww">wangwu</p>
                <p class="zl">zhaoliu</p>
            </div>
        </div>
      
    </body>

    <style>
        .zs,.zl {
            color: red;
        }
    </style>

# 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号(：)表示，比如：hover、:first-child

  1. a:link
    选择所有未被访问的链接
  2. a:visited
    选择所有已被访问的链接
  3. a:hover
    选择鼠标指针位于其上的链接
  4. a:active
    选择活动链接（鼠标按下未弹起的链接）

# :focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

    <body>
       <div>
            <input type="text" class="t"/>
       </div>
      
    </body>

    <style>
     
      .t:focus {
            border-color: red;
      }
    </style>

# 属性选择器

选择符 简介
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att="val"] 匹配具有att属性且值以val开头的E元素
E[at$="val"] 匹配具有att属性且值以val结尾的E元素
E[att*="val"] 匹配具有att属性且值中含有val的E元素

# E[att]，利用属性选择器就可以不用借助于类或者d选择器

<body>
    <input value="利用属性选择器"/>
    <input>
</body>
<style>
    input[value] {
        color: skyblue;
    }
</style>

# E[att="val"]，属性选择器还可以选择属性值的某些元素

<body>
    <input type="text" />
    <input type="password" value="密码" />
</body>
<style>
    input[type=password] {
        color: skyblue;
    }
</style>

# E[at$="val"]，属性选择器可以选择属性值开头的某些元素

<body>
  <div class="icon">图标</div>
  <div class="icon2">图标2</div>
  <div class="icon3">图标3</div>
  <div class="icon4">图标4</div>
</body>
<style>
    /*选择首先是div然后具有cLass,属性并且属性值必须是icon开头的这些元素*/
   div[class^=icon] {
       color: skyblue;
   }
</style>

# 匹配具有att属性且值中含有val的E元素

<body>
  <div class="icon">图标</div>
  <div class="icon2">图标2</div>
  <div class="icon3 data">图标3</div>
  <div class="icon4 data">图标4</div>
</body>
<style>
    /*选择首先是div然后具有cLass,属性并且属性值必须是icon开头的这些元素*/
   div[class^=icon] {
       color: skyblue;
   }
    /*属性选择器可以选择属性值结尾的某些元素*/
    div[class$=data] {
        color: pink;
    }
</style>

# 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

  1. nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
  2. nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找第n个孩子
选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个

# first-child

注意空格

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
<style>
    /*选择ul里面的第一个孩子 li */
    /*ul li:first-child {*/
    ul :first-child {
        background-color: pink;
    }
</style>

# last-child

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
<style>
    /*选择L里面的第一个孩子小Li*/
    ul li:last-child {
        background-color: pink;
    }

</style>

# nth-child

nth-child(n)选择某个父元素的一个或多个特定的子元素

  • n可以是数字，关键字和公式
  • n如果是数字，就是选择第n个子元素，里面数字从1开始…
  • n可以是关键字：even偶数，odd奇数
  • 可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略
<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
<style>
    /*选择L里面的第一个孩子小Li*/
    ul li:nth-child(3) {
        background-color: pink;
    }

</style>

# nth-child(公式)

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
<style>
    /*选择L里面的第一个孩子小Li*/
    ul li:nth-child(even) {
        background-color: pink;
    }

</style>

# nth-child(n)

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
<style>
    /*3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母选择了所有的孩i*/
    ul li:nth-child(n) {
        background-color: pink;
    }

</style>

# nth-of-type

<body>
    <div>
        <p>p</p>
        <div>div1</div>
        <div>div2</div>
    </div>

</body>
<style>
    /*
        nth-of-type会把指定元素的盒子排列序号
        执行的时候首先看：nth-child(1)之后回去看前面div
    */
    div div:nth-of-type(1) {
        background-color: skyblue;
    }
</style>

# 公式

公式 取值
2n 偶数
2n +1 奇数
5n 5 10 15…
n+5 从第5个开始（包含第五个）到最后
-n+5 前5个（包含第5个）…

# 伪元素选择器

  • before和after创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • before和after必须有content属性
  • before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为1

语法：

element::before {
    
}
选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
<body>
    <div>
        是
    </div>

</body>
<style>
    div::before {
        /*
            content 必须
        */
        content: '我';
    }

    div::after {
        content: "张三";
    }
</style>

# 使用场景

  1. 图标
<body>
    <div>

    </div>

</body>
<style>
    div {
        height: 30px;
        width: 200px;
        border: 1px solid skyblue;
        border-radius: 20px;
        position: relative;
    }

    div::after {
        content: '▲';
        position: absolute;
        right: 20px;
        font-size: 20px;
    }
</style>

← 文本属性 →