close

CSS 中的高级元素选择- 技术和示例

伪类

伪类允许您选择元素的特定状态或位置。 例如， :hover 当鼠标指针位于元素上方时选择元素、 :focus 当元素被选中或具有焦点时选择元素、 :nth-child() 选择组中的特定子元素。

例子： 

/* Select all links when hovered over and change the text color */  
a:hover {  
  color: red;  
}  
  
/* Select the <input> element when it is focused and change the border */  
input:focus {  
  border: 2px solid blue;  
}  
  
/* Select the second element in a group of <li> elements and change the text color */  
li:nth-child(2) {  
  color: green;  
}

 

伪元素

伪元素允许您创建虚拟元素来自定义现有元素。

例如， 在元素之前和之后创建元素， ::before 并 选择 元素的第一行和第一个字母。 ::after ::first-line ::first-letter

例子： 

/* Add content before each <p> element and style it */  
p::before {  
  content: ">> ";  
  font-weight: bold;  
  color: gray;  
}  
  
/* Style the first letter of <h1> element */  
h1::first-letter {  
  font-size: 2em;  
  font-weight: bold;  
  color: red;  
}

 

组合器

组合器允许您组合选择器以根据元素的关系来选择元素。 例如， element1 element2 选择 element2 inside element1、 element1 > element2 选择 的直接子元素 element1、 element1 + element2 选择 element2 紧接其后的元素 element1。

例子： 

/* Select <span> elements inside an element with class "container" */  
.container span {  
  color: purple;  
}  
  
/* Select <li> elements that are direct children of <ul> */  
ul > li {  
  list-style-type: square;  
  color: blue;  
}

 

属性选择器

属性选择器允许您根据元素的属性值来选择元素。 例如， [attribute] 选择属性为 的元素 attribute、 [attribute=value] 选择属性 attribute 等于 的元素 value 、选择属性以 开头的 [attribute^=value] 元素 。 attribute value

例子： 

/* Select all elements with the attribute data-type */  
[data-type] {  
  font-weight: bold;  
  color: orange;  
}  
  
/* Select all <a> elements with the href attribute starting with "https://" */  
a[href^="https://"] {  
  color: blue;  
  text-decoration: underline;  
}

 

:not() 选择器

选择器 允许您选择与特定选择器不匹配的元素。 例如， 选择没有 class 的元素 ， 选择没有 ID 的元素 。 :not() :not(.class) class :not(#id) id

例子： 

/* Select all <div> elements that do not have the class "hidden" */  
div:not(.hidden) {  
  display: block;  
  background-color: lightgray;  
}  
  
/* Select all <input> elements that do not have the ID "email-input" */  
input:not(#email-input) {  
  border: 1px solid gray;  
}

 

这些示例演示了 CSS 中的高级元素选择。 您可以根据需要自定义和应用这些技术来设计和自定义网页上的元素。