css交集选择器什么意思_【学废了】CSS 初步选择器

最新推荐文章于 2024-03-12 20:08:25 发布

习翔宇

最新推荐文章于 2024-03-12 20:08:25 发布

阅读量230

点赞数

文章标签： css交集选择器什么意思

本文链接：https://blog.csdn.net/weixin_29229055/article/details/112332488

版权

后台回复 css 获得更多阅读资源哦！

上次讲到了如何用 HTML 写出简单的登录界面。当然这样的界面你肯定见不到，实在是太简陋了。今天介绍的 CSS 就是如何在这基础上加花！

HTML 源码：

 <body>    <div class="title">Logindiv>    <form action="login" id="login-form">        <div class="field">            <label for="username">User: label>            <input type="text" name="username">        div>        <div class="field">            <label for="password">Password: label>            <input type="text" name="password">        div>        <button type="submit">Loginbutton>    form>body>

简简单单

首先什么是 CSS：

CSS (Cascading StyleSheet), 层叠样式表，是修饰网页样式的文件，包括但不限于颜色，字型，动画，简单交互动效，排版。

注意这里的 ”层叠“ 一词，等会会解释，它是 CSS 的思想基础。

CSS 语法很单调。90% 的 CSS 都是这样写的：

这些一块块的，就组成了一个完整的 CSS 文件。

(!color) selector 就是元素选择器，它选定了 CSS 规则施加对象。attr 则是属性名，比如 font-size, display, color, user-select，等等等等，真是琳琅满目。value 则是属性的值，每个属性都有自己对应的语法。一个 attr + 一个 value 合起来就叫规则(rule)。规则是可以覆盖的，或者应该说层叠。比如有两块都选择了一个元素，一个设置了字为红色，一个蓝色。优先级高的就会覆盖低的。一般来说都是写在后面的覆盖前面的规则。

选择器可以这样写：input 就是选择了两个输入框。还记得 class 属性要怎么表示吗？是点 . 。因此可以用 div.title 选择包含 Login 字段的 div。其实也可以省略 . 前面的东西，只写 .title，同样可以选择那个 div，与其它有 title 的 class 的元素。# 是选择 id 属性的，因此 form#login-form 选择了整个表单。同样可以直接写 #login-form 选择所有带有此 id 的元素。除了 id 和 class, 其它元素属性也可以用来选择。比如 input[name='password'] 选择密码输入框。button[type='submit'] 选择提交的 Login 按钮，它有 type 属性为 submit。

选择器还有好多好多好玩的功能和表达能力，有能力的可以考虑读完整篇。

attr 和 value 在一起叫做 CSS 规则。比如我们将上面例子修改如下(任何可显示的 HTML 元素都有个 style 属性，在里面可以写下样式属性规则)。

效果：

源码：

 <body style="text-align: center;width: 200px;">    <div class="title" style="        font-size:20px;        border-bottom: 1px solid #aeaeae;        margin-bottom: 10px;    ">Logindiv>    <form action="login" id="login-form" style="text-align: left;">        <div class="field" style="padding: 5px;">            <label for="username">User: label>            <input type="text" name="username">        div>        <div class="field" style="padding: 5px;">            <label for="password">Password: label>            <input type="text" name="password">        div>        <button type="submit"        style="            margin: 10px;            float: right;            color: #ffffff;            background-color: #2358cd;            font-size: 24px;            border: none;            padding: 7px;            border-radius: 10px;        ">Loginbutton>    form>body>

CSS 属性实在是太多了，必须一点点地积累。不是一两天就能全学会的。想要更多阅读资源，后台回复 css 哦！这里我们只讲几个：

font-size 字体大小，很好理解。比如 div.title 里我将字体大小设为 20 个像素。20 是数字，px 是单位像素。CSS 有很多单位，今天不展开。后面肯定会讲的。
color、background-color 字体颜色和背景颜色。这里用的是 HEX color 的写法，也就是十六进制。每两位分别对应 rgb 里的一个数值。比如 button[type='submit'] 的背景色是 #2358cd，对应的 rgb 值就是 (35, 88, 205)。
margin， padding 两者都是指边距，但是定义和用处又不一样。在介绍 CSS 盒的时候会讲到，今天不展开。

把样式全都写进 style 属性确实方便，不需要考虑任何选择器的问题。但是这样的问题显而易见：代码太大，覆盖了有用文字信息。因此我们最好将 CSS 和 HTML 分开来：

 /** style.css */body {    text-align: center;    width: 200px;}.title {    font-size:20px;    border-bottom: 1px solid #aeaeae;    margin-bottom: 10px;}#login-form {    text-align: left;}.field {    padding: 5px;}button[type='submit'] {    margin: 10px;    float: right;    color: #ffffff;    background-color: #2358cd;    font-size: 24px;    border: none;    padding: 7px;    border-radius: 10px;}

 <head>            <link rel="stylesheet" type="text/css" href="./style.css" />head><body>    <div class="title">Logindiv>    <form action="login" id="login-form">        <div class="field">            <label for="username">User: label>            <input type="text" name="username">        div>        <div class="field">            <label for="password">Password: label>            <input type="text" name="password">        div>        <button type="submit">Loginbutton>    form>body>

是不是感觉突然神清气爽了！这样就成功把结构(HTML) 和样式(CSS) 分开来了。想要改样式，就只用碰 CSS 。想要改结构，就只用碰 HTML 。简直好太棒了！后台回复 css 获取源码压缩文件。

学废警告！非战斗人员请撤离！

CSS 关系选择器

选择器可以组合起来。考虑如下代码：

 <div class="article container">    <p id="para1">        Lorem ipsum dolor sit amet    p>    <p id="para2">        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris    p>    <p id="para3">        Deleniti veritatis adipisci repudiandae libero    p>div><div class="buttons container">    <button>        LIKE    button>    <button>        FAVORITE    button>    <div>        <button>            SHARE        button>    div>div><div class="container">        <a>no hrefa>    <a href="">has hrefa>    <a href="www.baidu.com">Baidua>div>

* 全选。常用于全局清空样式。它叫 通用选择器 。
.article.container 选择了第一个 div。它代表元素的 class 属性同时拥有 container 和 article，好比数学中的交集。

值得一提的是 class 可以有多个，用空格隔开，class 是词列表，而 id 是单词。因此 id 常用于标识单个元素，class 常用于标识可以共享的样式。

.article.container #para1 选择了 #para1 ，就是里面有 Lorem ipsum ……内容的 p 元素。同理 .article.container #para2 将选择第二个 p。这里是以空格隔开，写法是，意味着 ancestor 的儿子，或者孙子，或者更深的层里符合 target 选择器的元素。这种关系选择器叫做 后代选择器 ，也是最常见的一种关系选择器。.article.container * 则将三个 p 都选择了。

Lorem ipsum 是假文。表示内容不重要，请关注样式或者字体等其它内容。

.buttons.container > button 选择了 LIKE 和 FAVORITE 按钮，但是没有选择 SHARE 按钮。为什么呢？因为 > 它是 子元素选择器 。它只选择了直属于之前的元素的元素，也就是说它只选择儿子而不是孙子。
.buttons.container > button, .buttons.container > div > button 别被吓到。它和上面的不一样，它即选择了 LIKE 和 FAVORITE 又选择了 SHARE。这个逗号叫 选择器分组，grouping。顾名思义就是将多个选择器
.container a[href="www.baidu.com"] 这个你读了上面就应该不陌生。它选择了 .container 下 href 属性值为 www.baidu.com 的 a 元素，只有一个。它叫 属性选择器
p#para1 ~ p 选择了 #para2 和 #para3 。这个波浪号叫 一般兄弟选择器。写法 ~ 意味着选择任何跟在 former 选中元素后同级符合 target 的选择器。
p#para1 + p 只是选择了 #para2。这个加号叫 相邻兄弟选择器。和 一般兄弟选择器 不同的是，它只选择紧跟在 former 后面的符合 target 的元素。

button:hover 冒号选择了所谓的伪类(pseudo-class)。伪，意思是一般情况下不存在的。它选择了被鼠标悬浮在上的 button。它可以用来做动效，比如鼠标到按钮上的时候，按钮“浮起来”，离开时让按钮“变回去”。
p::before 双冒号选择的是 伪元素(pseudo-element)。before 是指在元素前的一个不存在的元素。它可以用来做一些修饰性的东西，还有好多其它的用途。

Rome is not build in one day，冰冻三尺非一日之寒。学 CSS 必须靠实战实践。选择器只是初级入门，接下来还有盒子模型、优先级、动画与过渡、布局、模块化、响应式设计。敬请期待哦！