选择器用于选择属性中的HTML元素。下面给出了一些不同类型的选择器：
null
- 相邻同级选择器： 它会选择与指定元素相邻的所有元素。如果第二个元素紧跟在第一个元素之后，它将选择第二个元素。 语法 ：选择紧跟在h4标签后面的ul标签。
html
h4+ul{ border: 4px solid red; } |
例子：
html
<!DOCTYPE html> < html > < head > < title >adjacent</ title > < style type = "text/css" > ul+h4{ border:4px solid red; } </ style > </ head > < body > < h1 >GeeksForGeeks</ h1 > < ul > < li >Language</ li > < li >Concept</ li > < li >Knowledge</ li > </ ul > < h4 >Coding</ h4 > < h2 >Time</ h2 > </ body > </ html > |
输出：
![图片[1]-CSS中的高级选择器-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_1-126.png)
- 属性选择器： 它选择特定类型的输入。 语法：
html
input[type="checkbox"]{ background:orange; } |
例子：
html
< html > < head > < title >Attribute</ title > < style type = "text/css" > a[href=" http://www.google.com "]{ background:yellow; } </ style > </ head > < body > </ body > </ html > |
输出：
![图片[2]-CSS中的高级选择器-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_2-80.png)
- 第n个类型选择器： 它从元素的位置和类型中选择元素。 语法： 选择一个特定的数字标签进行更改。
html
div:nth-of-type(5){ background:purple; } |
如果我们想在所有方面做出改变，即使是李。
html
li:nth-of-type(even){ background: yellow; } |
例子：
html
< html > < head > < title >nth</ title > < style type = "text/css" > ul:nth-of-type(2){ background:yellow; } </ style > </ head > < body > < ul > < li >java</ li > < li >python</ li > < li >C++</ li > </ ul > < ul > < li >HTML</ li > < li >CSS</ li > < li >PHP</ li > </ ul > < ul > < li >C#</ li > < li >R</ li > < li >Matlab</ li > </ ul > </ body > </ html > |
输出：
![图片[3]-CSS中的高级选择器-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_3-77.png)
- 直接子选择器： 它选择与第二个元素匹配的任何元素，该元素是与第一个元素匹配的元素的直接子元素。第二个选择器匹配的元素必须是第一个选择器匹配的元素的直接子元素。 语法：
html
p > div { background-color: DodgerBlue; } |
例子：
html
< html > < head > < title >child combinator</ title > < style type = "text/css" > div > span { background-color: DodgerBlue; } </ style > </ head > < body > < div > < span >inside div and is inside span</ span > < p >inside div but not inside span < span >inside div p</ span > </ p > </ div > < span >not inside div</ span > </ body > </ html > |
输出：
![图片[4]-CSS中的高级选择器-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_4-48.png)
- 它与子体选择器不同，因为子体选择器选择与第二个元素匹配的元素，该元素是与第一个元素匹配的元素的后代（可以是子元素，也可以是其子元素的子元素等）。
- 通用同级选择器： 如果它跟随第一个元素，并且两个子元素都属于同一父元素，则它仅选择第一个元素。第二个元素不必紧跟在第一个元素之后。 语法： 对段落标记后面的跨度元素内容所做的更改，两者都有相同的父标记。
html
p ~ span { color: red; } |
例子：
html
< html > < head > < title ></ title > < style type = "text/css" > p ~ span { color: red; } </ style > </ head > < body > < p >Coding is < span >fun!</ span > </ p > < h1 >GeeksforGeeks</ h1 > < p >learn</ p > < span >Last span tag.</ span > </ body > </ html > |
输出：
![图片[5]-CSS中的高级选择器-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_5-34.png)
- 元素选择器： 它选择包含在上述元素中的文本。 语法：
html
div { background:green; } p { color: yellow; } |
例子：
html
< html > < head > < title ></ title > < style type = "text/css" > div { background:purple; } p { color: yellow; } </ style > </ head > < body > < div > This is inside div element. < p >Coding is fun! GeeksforGeeks learn Last span tag. </ p > div element is closing </ div > </ body > </ html > |
输出：
![图片[6]-CSS中的高级选择器-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_h1-1.png)
- ID选择器： 它选择对页面上特定文本所做的更改，因为它在页面上只能使用一次。 语法：
html
# special { color: yellow; } |
例子：
html
< html > < head > < title ></ title > < style type = "text/css" > #special { color: blue; } </ style > </ head > < body > < div > This is inside div element. < p >Coding is fun!</ p > < p >This is a paragraph.</ p > < p id = "special" >This paragraph is with "special" id.</ p > div element is closing </ div > </ body > </ html > |
输出：
![图片[7]-CSS中的高级选择器-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_h2-1.png)
- 类选择器： 它与ID选择器相同，但可以在页面中多次使用。 语法：
html
.highlight { background: yellow; } |
例子：
html
< html > < head > < title ></ title > < style type = "text/css" > .highlight { background: yellow; } p { background: blue; } </ style > </ head > < body > < p class = "highlight" > This is inside the highlight</ p > < p >This is normal paragraph.</ p > </ body > </ html > |
输出：
![图片[8]-CSS中的高级选择器-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_h3-1.png)
- 星选择器： 所做的更改将对整个页面进行。 语法：
html
*{ border:1px solid lightgrey; } |
例子：
html
< html > < head > < title ></ title > < style type = "text/css" > *{ border:1px solid lightgrey; } </ style > </ head > < body > < p class = "highlight" > This is inside the highlight</ p > < p >This is normal paragraph.</ p > </ body > </ html > |
输出：
![图片[9]-CSS中的高级选择器-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_h4-1.png)
- 后代选择器： 它只对其他元素内部的元素进行更改。 语法： 选择“li”元素内的所有锚定标签，即“ul”元素内的锚定标签。
html
ul li a{ color: red; } |
例子：
html
< html > < head > < title ></ title > < style type = "text/css" > ul li a{ color:red; } </ style > </ head > < body > < ul > < li > This is inside first li element.</ li > < li >Coding is fun! < li > < li >< a href = "www.google.com" >Click here to go to google.</ a ></ li > < li >The last li.</ li > </ body > </ html > |
输出：
![图片[10]-CSS中的高级选择器-yiteyi-C++库](https://media.geeksforgeeks.org/wp-content/uploads/h5.png)
- 在以下示例中，所有选择器一起使用：
html
< html > < head > < title >nth</ title > < style type = "text/css" > #special{ color:red; } .highlight{ background: green; } ul:nth-of-type(2){ background:yellow; } ul+h4{ border:4px solid purple; } a[href=" http://www.google.com "]{ background:yellow; } h1 ~ h4 { color: red; } div > span { background-color: DodgerBlue; } </ style > </ head > < body > < h1 >GeeksForGeeks</ h1 > < ul > < li >java</ li > < li >python</ li > < li >C++</ li > </ ul > < ul > < li >HTML</ li > < li >CSS</ li > < li >PHP</ li > </ ul > < ul > < li >C#</ li > < li >R</ li > < li >Matlab</ li > </ ul > < h4 >Coding</ h4 > < div > < span >inside div and is inside span</ span > < p >inside div but not inside span < span >inside div paragraph</ span > </ p > < p class = "highlight" >inside div but not outside span with class element.</ p > < p id = "special" >inside div but not outside span with id element.</ p > < p class = "highlight" >inside div but not outside span with another class element.</ p > </ div > for geeksforgeeks.com</ a > click here for google.com</ a > </ body > </ html > |
输出：
![图片[11]-CSS中的高级选择器-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_h6.png)
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案-yiteyi-C++库](https://www.yiteyi.com/wp-content/themes/zibll/img/thumbnail.svg)
