CSS选择器

最新推荐文章于 2023-12-12 09:35:39 发布

流年笑掷丨

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量315

点赞数

分类专栏：理论与基础文章标签： css

本文链接：https://blog.csdn.net/zuoboqiao/article/details/105935604

版权

理论与基础专栏收录该内容

15 篇文章 2 订阅

订阅专栏

Web前端css3选择器

参考文档： https://man.ilovefishc.com/css3/

一、基本选择器

选择器	类型	功能描述	示例
*	通配选择器	选择文档中所有的html元素	`* {padding: 4px;}`
E	元素选择器	选择指定的类型的html元素	`a {border: thin black solid; }`
#id	ID选择器	选择指定ID属性值为“id”的任意类型的元素	`#test { color: blue; }`
.class	类选择器	选择指定的class属性值为“class”的任意类型的任意多元素	`.class { color: red; }`
selector1，selector2	群组选择器	将每一个选择器匹配的元素集合并	`[href] { padding: 4px; }`

* {         /* 通配选择器前面加个* */
    padding: 10px;
    background-color: #d1feff;
}

h2 {        /* 元素选择器 */
    text-align: center;
}

span {
    color: gray;
    padding: 0px;
}

.slogan{        /* 类选择器前面加个. */
    text-align: center;
    color: green;
}

.content{
    text-indent: 2em;
}

#ol{        /* id选择器前面加个# */
    color: red;
}

<h2>滑板</h2>
<p class="slogan">"世界上最酷的运动之一"</p>
<p class="content">滑板被称为是“世界上最酷的运动”而究竟是谁第一个创造了滑板已无法考证，但可以确定的是，滑板最初的起源是与加州的冲浪爱好者们有关，冲浪十分受地理与气候条件的影响，于是浪人们决定在陆地上模拟这项运动。</p>
<p class="content">一块木板底部装上两排轮滑的铁质轮子，这就是第一代滑板。当时玩滑板的几乎全为冲浪族群，为了在没有浪时仍能练习脚感，所以当时的滑板动作几乎与冲浪相似，多为平面动作。60年代，随着朋克思想与新浪潮音乐的兴起，滑板不仅仅满足于平面运动，许多公司开始举办比赛，场地越来越多样，泳池、斜坡、半管等，玩法也越来越丰富。</p class="content">
<p class="content">要说滑板最重要的转变，一定是在70年代。60年代的滑板轮子多为铁轮或是黏土烧制而成，十分笨重，且无法转向，没有任何弹性。而<span>Frank Nasworthy</span>，参观朋友爸爸橡胶工厂后，尝试用橡胶来制作滑板轮子，大大改善了滑板的避震性。70年代末期，一位叫做<span>Alan Gelfand</span>的滑板爱好者，发明了一种滑板技巧，给滑板运动带来了革命性的进步，这个人的名字也许大家很陌生，但是他的小名，只要接触过滑板的人都会知道——<span id="ol">Ollie</span>，滑板入门级动作。</p class="content">
<p class="content">80年代的滑板的形状越来越丰富，但同时受到的阻力也越来越大。技巧越多，也意味着危险性越大，70年代末种种运动伤害事件让美国政府开始抵制，滑板由此带上了叛逆色彩，并且走上街头。将所有街头障碍物当做自己技巧的磨炼，这时，两头翘起、形状对称的滑板就出现了，也就是我们现在熟悉的双翘滑板，也称街式滑板。</p class="content">

二、复合选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且F元素被包含在匹配的E元素内（只要是后代同时起作用。）
E.F 丨 E#F	交集选择器	交集选择器，找到指定标签间的共有部分
E , F	并集选择器	并集选择器，找到所有满足的标签
E > F	子选择器	选择匹配的F元素，且F元素是E元素的子元素（第一层div起作用，有迭代关系。）
E + F	相邻兄弟选择器	选择匹配的F元素，且F元素是E元素后面紧邻的兄弟元素（找相邻第一个兄弟节点。）
E ~ F	通用选择器	选择匹配的F元素，且F元素是E元素后面的所有兄弟元素（找下面的兄弟节点。找弟弟）

span.content {       /* 交集选择器：元素选择器.类选择器 丨 元素选择器#id选择器 */
    border: thin black solid;
}

h2,p,span {     /* 并集选择器：选择器1，选择器2，选择器3 */
    font-style: italic;
}

body .content {      /* 后代选择器：选择器1 选择器2 选择器3     用空格隔开 */
    border: thin red solid;
}

body > .slogan {     /* 子元素选择器：选择器1 > 选择器2 */
    border: thin blue solid;
}

.slogan + p {        /* 相邻兄弟选择器：选择器1 + 选择器2 */
    color: pink;
}

.content ~ p {      /* 通用兄弟选择器：选择器1 ~ 选择器2 */
    color: orange;
}

<h2>滑板</h2>
<p class="slogan">"世界上最酷的运动之一"</p>
<p class="content">滑板被称为是“世界上最酷的运动”而究竟是谁第一个创造了滑板已无法考证，但可以确定的是，滑板最初的起源是与加州的冲浪爱好者们有关，冲浪十分受地理与气候条件的影响，于是浪人们决定在陆地上模拟这项运动。</p>
<p class="content">一块木板底部装上两排轮滑的铁质轮子，这就是第一代滑板。当时玩滑板的几乎全为冲浪族群，为了在没有浪时仍能练习脚感，所以当时的滑板动作几乎与冲浪相似，多为平面动作。60年代，随着朋克思想与新浪潮音乐的兴起，滑板不仅仅满足于平面运动，许多公司开始举办比赛，场地越来越多样，泳池、斜坡、半管等，玩法也越来越丰富。</p class="content">
<p class="content">要说滑板最重要的转变，一定是在70年代。60年代的滑板轮子多为铁轮或是黏土烧制而成，十分笨重，且无法转向，没有任何弹性。而<span class="content">Frank Nasworthy</span>，参观朋友爸爸橡胶工厂后，尝试用橡胶来制作滑板轮子，大大改善了滑板的避震性。70年代末期，一位叫做<span class="content">Alan Gelfand</span>的滑板爱好者，发明了一种滑板技巧，给滑板运动带来了革命性的进步，这个人的名字也许大家很陌生，但是他的小名，只要接触过滑板的人都会知道——<span id="ol">Ollie</span>，滑板入门级动作。</p class="content">
<p class="content">80年代的滑板的形状越来越丰富，但同时受到的阻力也越来越大。技巧越多，也意味着危险性越大，70年代末种种运动伤害事件让美国政府开始抵制，滑板由此带上了叛逆色彩，并且走上街头。将所有街头障碍物当做自己技巧的磨炼，这时，两头翘起、形状对称的滑板就出现了，也就是我们现在熟悉的双翘滑板，也称街式滑板。</p class="content">
<p class="content">80年代末，由于美国电影《危险之至》在中国各大城市上映，滑板运动的魅力深深迷住了许多中国青少年。滑板早已不是一个单纯的运动，而是一个文化。2020年东京奥运会滑板也首次作为比赛项目</p class="content">

三、属性选择器

选择器	功能描述
E[attribute]	选中具有attribute属性的E元素
E[attribute=value]	选中具有attribute属性，并且属性值为value的E元素
E[attribute \| =value]	选中具有attrbute属性，并且属性值为连续字符分割的多个值，其中第一个为字符串value的元素
E[attribute~=value]	选中具有attribute属性，并且属性值包含value的E元素，该属性值必须以空格隔开
E[attribute*=value]	选中具有attribute属性，并且属性值包含value的E元素，通配符
E[attribute^=value]	选中具有attribute属性，并且属性值以value开始的E元素，起始符
E[attribute$=value]	选中具有attribute属性，并且属性值以value结束的E元素，结束符

四、伪元素选择器

选择器	功能描述
E ：： first-letter	选择文本块的第一个字母
E ：： first-line	选择文本快的第一行
E ：： before 和E ：： after	主要用于清除浮动
E ：： selection	选中的E元素

    ::first-line {      /* 若在两个冒号前面加个p 就只对p元素的第一行起作用 */
        background-color: aqua;
        color: red;
    }

    /* 请在a元素的前后分别插入文本 */
    a::before {
        content: url(../图片/004.jpg);
    }
    a::after {
        content: "哈哈哈";
    }

    /* 请设置用户选中的部分文本样式 */
    ::selection {
        background-color: red;
        color: green;
    }

    /* 设置文本第一个首字母 */
    p::first-letter {
        background-color: gold;
        color: white;
    }

<div>High school is a very important stage for every Chinese student, because they will study and fight for their future together. At that time, we could see the change of the school and talk about our school time.</div>
<p>When the college entrance exam is over, it means the end of this stage. Some may go to college and some may choose to work. No matter what the choice they make, they need to be separated and begin the different chapter of life. </p>
<a href="https://ilovefishc.com" target="_blank">大家好</a>

五、动态伪类选择器

选择器	说明
:link	选择链接元素
:visited	选择用户已访问的链接元素
:hover	鼠标悬停在其上的元素
:active	当前被用户激活的元素，通常意味着用户即将点击（或按压）该元素
:focus	当前获得焦点的元素

	/* 这四个样式是有先后顺序的 可以用爱恨原则来记忆
       L O V E & H A T E
       L:link   V:visited   H:hover A:active
     */

    /* 链接未被访问的时候 */
    a:link {
        color: pink;
    }
    /* 链接被访问的时候 */
    a:visited {
        color: red;
    }
    /* 鼠标悬停在链接上方的时候 */
    a:hover {
        color: black;
    }
    /* 鼠标摁下链接的那一刻 */
    a:active {
        color: green;
    }


    /* 设置当元素获得焦点时的样式 */
    input#boy:focus {
        background-color: cyan;
    }
    input#girl:focus {
        background-color: pink;
    }
    
<a href="https://ilovefishc.com" target="_blank">大家好啊 good morning</a>
<br><br><br>

<form>
    <label>他的名字</label>
    <input type="text" name="name" id="boy">
    <br><br>
    <label>她的名字</label>
    <input type="text" name="name" id="girl">
</form>

六、结构伪类选择器语法

选择器	功能描述
E ： first-child	作为父元素的第一个子元素的E元素
E ： last-child	作为父元素的最后一个子元素的E元素
E ： root	匹配文档中的根元素（返回html元素）
E F：nth-child（n）	选中的F元素是E元素的第n个子元素
E F： nth-last-child（n）	选中的F元素是E元素的倒数第n个子元素
E ： nth-of-type（n）	选择父元素内具有指定类型的第n个E元素
E ： nth-last-of–type（n）	选择父元素内具有指定类型的倒数第n个E元素
E ： first-of-type	选择父元素内具有指定类型的第1个E元素
E ： last-of-type	选择父元素内具有指定类型的倒数第1个E元素
E ： only-child	选择父元素内只包含一个子元素,且该元素是E元素
E ： only-of-type	选择父元素内只包含一个类型的子元素，且该元素是E元素
E ： empty	选择没有子元素的元素

七、目标伪类选择器

选择器	类型	功能描述
E ： target	目标伪类选择器	选择匹配E的所有元素，且匹配元素被相关URL指向

八、 UI元素状态伪类选择器

选择器	类型	功能描述
E ： checked	选中状态伪类选择器	匹配选中的复选按钮或单选按钮，并且他们是选中状态
E ： enabled	启用状态伪类选择器	匹配启用状态的表单元素
E ： disabled	不可用状态伪类选择器	匹配禁用状态的表单元素