css 笔记(一) 选择器

文章目录

    • 选择器
      • 全局选择器
      • 标签选择器
      • 类选择器
      • id 选择器
      • 父子关系
        • 后代选择器
        • 子代选择器
      • 兄弟关系
        • 相邻选择器
        • 兄弟选择器
      • 数学关系
        • 交集选择器
      • 通配选择器
      • 属性选择器
    • 写给看到最后的你

选择器

全局选择器

* {
    匹配包含html在内的所有元素
}

标签选择器

可以选出所有相同的标签

<html>
<head>
    <style>
        p {
            color:red;
            }
    style>
head>

<body>
    <p>字体颜色红色
body>
html>

类选择器

可以选出一个或者是多个标签

<html lang="zh">
    <head>
        <style>
            .class-name {
                color: red;
            }
        style>
    head>

    <body>
        <p class="class-name">类选择器p>
        <h1 class="class-name"> 这个也会变红h1>
        <p class="class-name1 class-name=2">可以多个类 空格隔开p>
    body>
html>

id 选择器

只能选择一个标签 注意跟类选择器的区别,只能用一次 一般与js搭配

<html>
    <head>
        #id {
            color: red;
        }
    head>
    <body>
        <p id="id">id选择器p>
    body>
html>

父子关系

后代选择器

E F {
    
}E,F可以是基础选择器当中的任意一种(class,id,*,TagName)
匹配的是E的*后代*类型为F的元素(F可以是E的直接子代,也可以是后代(孙子辈))

子代选择器

E > F {
    
}E,F可以是基础选择器当中的任意一种(class,id,*,TagName)
匹配的是E的*直接子代*类型为F的元素

兄弟关系

相邻选择器

E + F {}匹配的是与E类型紧紧相邻的下一个类型为F的兄弟元素

兄弟选择器

E ~ F {}匹配的是与E相邻的类型为F的下一些兄弟元素

数学关系

交集选择器

EF {} 一般来说:E是标签选择器 F是类 div.a 含义是:类名为a的div元素

通配选择器

选择所有的标签

<html>
    <head>
        <style>
            * {
                color: red;
            }
        style>
    head>

    <body>
        <p> 通配选择器p>
        <a> toa>
    body>

html>

属性选择器

属性选择器

a {
  color: blue;
}

/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

/* 包含 "insensitive" 的链接,不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 包含 "cAsE" 的链接,区分大小写 */ 
a[href*="cAsE" s] { 
  color: pink; 
}

/* 以 ".org" 结尾的链接 */
a[href$=".org"] {
  color: red;
}

写给看到最后的你

朋友,感谢你看到了最后,新手报道,技术不成熟的地方请多多指点,感谢!

公众号:Linux下撸python
期待和你再次相遇
愿你学的愉快

在这里插入图片描述

你可能感兴趣的:(css 笔记(一) 选择器)