【青训营】前端——CSS选择器

这是我参与「第四届青训营」笔记创作活动的的第2天

初学CSS的时候，对CSS选择器只停留在简单的标签、类与id选择器上【青训营】前端——HTML与CSS入门 | 青训营笔记 - 掘金 (juejin.cn)，今天就记录一些别的选择器和伪类等方面内容。

选择器

通配选择器

<style>
    * {
        color : red;
        font-size : 20px;
    }
</style>

这种写法能匹配到所有HTML的元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。

属性选择器

示例一：

<label>用户名：</label>
<input value="zhangsan" disabled />
<label>密码：</label>
<input type="password" />

<style>
 [disabled] {
   background: #eee;
   color: #999;
 }

</style>

效果：

这里根据有没有disabled这个属性，来选择元素，而对于input[type="password"]这种，是在input标签里，需要有type这个属性，并且属性值为password才会被选中

示例二：

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<style>
  *{
    padding-left: 1.1em;
  }
  a[href^="#"] {
    color: red;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    
  }
  a[href$=".jpg"] {
    color: blue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
  }
</style>

效果：

href^="#"代表着匹配href以#号开头的，而href$=".jpg"代表匹配所有以.jpg结尾的href，可以设置所有jpg图片的样式。另外，a标签中href="#"表示回到最顶部，如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部<ahref="#"> 回到最顶端 </a>

伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

/* 未访问的链接， 默认状态 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

/* 聚焦状态，比如点击输入框，div:blur 与focus一对使用,失去焦点 */
:focus {
  outline: 2px solid orange;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！

<ol>
  <li>第一行</li>
  <li>第二行</li>
  <li>第三行</li>
</ol>
<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

也可以通过上述方式选择，在某些时候希望第一个与最后一个元素与其他不同，效果如下：

选择器组合

名称	语法	说明	示例
直接组合	`AB`	满足A同时满足B	`input:focus`
后代组合	`A B`	选中B，如果它是A的子孙	`nav a`
亲子组合	`A > B`	选中B，如果它是A的子元素	`section > p`
兄弟选择器	`A ~ B`	选中B，如果它在A后且和A同级	`h2 ~ p`
相邻选择器	`A + B`	选中B，如果它紧跟在A后面	`h2 + p`

后代组合和亲自组合区别在于，后代组合是A的所有后代，孙及以后也算，但是亲代只能选中A的子元素。
通用兄弟选择器与相邻兄弟选择器非常相似，但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。

    <h3>用户名：</h3>
    <input type="text" />
      
    <h4>密码：</h4>
    <input type="password" />
      
      
    <style> 
        
    h1, h2, h3, h4, h5, h6{
      color:blue
    }
     
    [type="text"], [type="password"] {
        outline: 2px solid orange;
    }
    </style>

可以通过上述方式，选择一组元素，效果如下：

如有不恰当之处，欢迎指出~

【青训营】前端——CSS选择器 | 青训营笔记

【青训营】前端——CSS选择器

选择器

通配选择器

属性选择器

伪类

选择器组合