/* 所有的段落都会被应用样式 */
p {
  color: blue;
}

/* 应用于ID为"header"的元素 */
#header {
  background-color: navy;
}

/* 所有带有"class-name"类的元素 */
.class-name {
  font-weight: bold;
}

/* 选择
内的所有 */
div span {
  color: red;
}

子选择器
子选择器仅选择直接子元素。
/* 只选择
元素的直接子元素
 */
div > ul {
  list-style-type: none;
}

相邻同辈选择器
相邻同辈选择器选取紧随其后的相邻同辈元素。
/* 选择
元素之后的第一个
元素 */
p + h2 {
  margin-top: 0;
}

一般同辈选择器
一般同辈选择器用于选取某元素之后的所有具有相同父元素的同辈元素。

/* 选择
元素之后所有兄弟元素
 */
h2 ~ h2 {
  border-top: 1px solid gray;
}


通用选择器
通用选择器是一个通配符，匹配文档中的所有元素。

/* 页面中所有元素都将有黄色背景 */
* {
  background: yellow;
}

属性选择器
属性选择器根据元素的属性及其值来选择元素。

/* 选择含有"target"属性的HTML元素 */
[target] {
  border: 1px solid black;
}
/* 选择"target"属性等于"_blank"的HTML元素 */
[target="_blank"] {
  background-color: silver;
}

属性选择器与特殊字符
CSS还提供了特定的字符，供属性选择器使用，用于更加细致的条件匹配。

/* 选择具有以"btn-"开头的class属性值的元素 */
[class^="btn-"] {
  padding: 5px 10px;
}
/* 选择具有以"-btn"结尾的class属性值的元素 */
[class$="-btn"] {
  font-weight: bold;
}
/* 选择class属性值含有"btn-"的任何地方的元素 */
[class*="btn-"] {
  font-size: 1.2em;
}

伪元素选择器
伪元素选择器用于样式化元素的特定部分或生成的内容。
::first-letter 和 ::first-line

p::first-letter {
  font-size: 200%;
  color: #8A2BE2;
}
p::first-line {
  font-variant: small-caps;
}

::before 和 ::after

h1::before {
  content: "Welcome ";
  color: green;
}
h1::after {
  content: "!";
  color: red;
}

伪类选择器
伪类选择器用于定义元素的特殊状态。
:link、:visited、:hover、:focus、:active

a:link {
  color: #FF0000;
}
a:visited {
  color: #00FF00;
}
a:hover {
  color: #FF00FF;
}
a:focus {
  border: 1px dashed #0000FF;
}
a:active {
  color: #0000FF;
}

:target 和 :not()

:target {
  background-color: #f9f9f9;
}
:not(.highlighted) {
  background-color: #ffff00;
}

结构化伪类选择器
结构化伪类选择器允许基于文档结构选择元素。
:nth-child 和 :nth-last-child

li:nth-child(odd) {
  color: red;
}
li:nth-child(even) {
  color: blue;
}
/* 从末尾开始的第二个子元素 */
li:nth-last-child(2) {
  font-size: 1.5em;
}

:nth-of-type 和 :nth-last-of-type

/* 选择第一个
类型的元素 */
p:nth-of-type(1) {
  font-weight: bold;
}
/* 选择倒数第二个
类型的元素 */
p:nth-last-of-type(2) {
  background-color: lightgray;
}

伪类表单选择器
CSS为表单提供了一组伪类选择器，用于根据不同的状态来设置样式。
:required、:valid、:invalid、:optional、:in-range 和 :out-of-range

input:required {
  border: 1px solid red;
}
input:valid {
  border: 1px solid green;
}
input:invalid {
  background-color: #ffdddd;
}
input:optional {
  opacity: 0.75;
}
input:in-range {
  border-color: blue;
}
input:out-of-range {
  border-color: orange;
}

:read-only 和 :read-write

input:read-only {
  background-color: #eeeeee;
}
input:read-write {
  background-color: #fff;
}

通过精确选择元素，CSS选择器几乎可以无限制地控制页面样式。了解并掌握它们，将使设计者能够有效地操作DOM结构，带来更丰富的表现力和互动性。随着CSS规范的不断发展，选择器的种类和功能也在不断扩展，进一步增强了开发者描述和实现复杂设计的能力。
以上就是CSS中常见选择器的介绍与使用的详细内容，更多关于CSS选择器的资料请关注IT俱乐部其它相关文章！

						
						


						


Tag：css   选择器      



						
					


相关文章






CSS复合选择器的具体使用方法


							这篇文章主要介绍了CSS复合选择器的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学
 2021-02-23 









一文教你玩转CSS 组合选择器


							这篇文章主要介绍了一文教你玩转CSS 组合选择器,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
 2021-02-20 










CSS 中的六个重要选择器(三秒就可以记住)


							这篇文章主要介绍了CSS 中的六个重要选择器(三秒就可以记住),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
 2020-08-27 










CSS选择器中的正则表达式使用


							这篇文章主要介绍了CSS选择器中的正则表达式使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学
 2020-03-11 










巧用CSS属性值正则匹配选择器(小技巧)


							这篇文章主要介绍了巧用CSS属性值正则匹配选择器,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
 2020-03-11 










盘点CSS Selectors Level4中新增的选择器


							CSS 选择器在实践中是非常常用的，无论是在写样式上或是在 JS 中选择 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作组继续为选择器标准添加了更丰富的选择器。需
 2018-12-24 









css选择器设置标签样式的实例代码


							这篇文章主要介绍了css选择器设置标签样式的实例代码,需要的朋友可以参考下
 2018-11-22 









使用CSS属性选择器来拼接HTML的DNA的方法


							CSS属性选择器非常神奇，它们可以帮你避免添加数不胜数的类名，从另一方面来指出你代码里的一些问题。接下来通过本文给大家介绍使用CSS属性选择器来拼接HTML的DNA的方法，
 2018-11-02 









深入理解CSS 选择器 


							这篇文章主要介绍了CSS 选择器的相关知识，本文通过实例代码给大家介绍的非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
 2018-10-16 









CSS选择器的新用法(推荐)


							本文将详细介绍CSS选择器的新用法，感兴趣的朋友一起学习吧
 2018-02-02 








						
					
					

最新评论