CSS中的高级选择器用法解释和指南

2021年3月24日14:08:32 发表评论 1,095 次浏览

选择器用于选择属性中的HTML元素。下面给出了一些不同类型的选择器：

相邻兄弟选择器：

它选择所有与指定元素相邻的同级元素。如果紧接在第一个元素之后, 它将选择第二个元素。

语法

：选择ul标签, 紧随h4标签之后。

h4+ul{
     border: 4px solid red;
}

例子：

<!DOCTYPE html>
< html >
    < head >
       < title >adjacent</ title >
       < style type = "text/css" >
          ul+h4{
          border:4px solid red;
          }
       </ style >
    </ head >
    < body >
       < h1 >lsbin</ h1 >
       < ul >
          < li >Language</ li >
          < li >Concept</ li >
          < li >Knowledge</ li >
       </ ul >
       < h4 >Coding</ h4 >
       < h2 >Time</ h2 >
    </ body >
</ html >

输出如下：

CSS中的高级选择器1

属性选择器：

它选择一种特定的输入类型。

语法如下：

input[type="checkbox"]{
     background:orange;
}

例子：

< html >
    < head >
       < title >Attribute</ title >
       < style type = "text/css" >
          a[href="http://www.google.com"]{
          background:yellow;
          }
       </ style >
    </ head >
    < body >
       < a href = "http://www.lsbin.org" >lsbin.com</ a >< br >
       < a href = "http://www.google.com" target = "_blank" >google.com</ a >< br >
       < a href = "http://www.wikipedia.org" target = "_top" >wikipedia.org</ a >
    </ body >
</ html >

输出如下：

CSS中的高级选择器2

第n个类型的选择器：

它从其位置和类型中选择一个元素。

语法如下：

选择一个特定的数字标签进行更改。

div:nth-of-type(5){
     background:purple;
}

如果我们想在所有的地方都做罐头。

li:nth-of-type(even){
     background: yellow;
}

例子：

< 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 >

输出如下：

CSS中的高级选择器3

直接子选择器：

它选择与第二个元素匹配的任何元素, 该元素是与第一个元素匹配的元素的直接子元素。第二个选择器匹配的元素必须是第一个选择器匹配的元素的直接子元素。

语法如下：

p > div {
     background-color: DodgerBlue;
}

例子：

< 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 >

输出如下：

CSS中的高级选择器4

它与Descendant选择器不同, 因为Descendant选择器选择与第二个元素匹配的元素, 该元素是与第一个元素匹配的元素的后代(可以是子元素, 子元素的子元素等)。

通用兄弟选择器：

如果它跟随第一个元素并且两个子元素都属于同一父元素, 则它仅选择第一个元素。第二个元素不必紧随第一个元素。

语法如下：

对段落标记后面的span元素内容的更改, 并且都具有相同的父标记。

p ~ span {
     color: red;
}

例子：

< html >
    < head >
       < title ></ title >
       < style type = "text/css" >
          p ~ span {
          color: red;
          }
       </ style >
    </ head >
    < body >
       < p >Coding is 
          < span >fun!</ span >
       </ p >
       < h1 >lsbin</ h1 >
       < p >learn</ p >
       < span >Last span tag.</ span >
    </ body >
</ html >

输出如下：

CSS中的高级选择器5

元素选择器：

它选择包含在提到的元素内的文本。

语法如下：

div {
     background:green;
}
  
p {
     color: yellow;
}

例子：

< 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!
             lsbin learn Last span tag.
          </ p >
          div element is closing 
       </ div >
    </ body >
</ html >

输出如下：

CSS中的高级选择器6

ID选择器：

由于它只能在页面上使用一次, 因此它选择对页面上的特定文本所做的更改。

语法如下：

# special {
     color: yellow;
}

例子：

< 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 >

输出如下：

CSS中的高级选择器7

类选择器：

它与ID选择器相同, 但在一个页面中可以使用多次。

语法如下：

.highlight {
     background: yellow;
}

例子：

< 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 >

输出如下：

CSS中的高级选择器8

星级选择器：

所做的更改将在整个页面上进行。

语法如下：

*{
     border:1px solid lightgrey;
}

例子：

< 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 >

输出如下：

CSS中的高级选择器9

后代选择器：

它仅对另一个元素内部的那些元素进行更改。

语法如下：

选择所有位于" li"元素内和" ul"元素内的锚标签。

ul li a{
     color: red;
}

例子：

< 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 >

输出如下：

CSS中的高级选择器10

在以下示例中, 所有选择器一起使用：

< 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 >lsbin</ 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 >
       < a href = "http://www.lsbin.org" >click here
              for lsbin.com</ a >
       < a href = "http://www.google.com" target = "_blank" >
                   click here for google.com</ a >
    </ body >
</ html >

输出如下：

CSS中的高级选择器11
木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: