Css选择器再次入门

css选择器在css3之后又有了很大的进步

body
 display: flex
 background: #333333
 flex-wrap: wrap
 justify-content: center
 font-family: lato,"San Francisco Display","Helvetica Neue","Lucida Grande","noto sans",Helvetica,Arial,sans-serif

a
 text-decoration: none


// 第n个儿子
div:nth-child(odd)
 background: #885588



div:nth-child(even)
 background: #888855



// 第n个元素, 此处处理的行头
div:nth-of-type(odd) 
 border-right: none
 border-left: #aaa solid 30px 




 
// 这里选择了第一个和第二个, 去掉底部border
body > div:has(+ div)
 &:nth-of-type(3n-2),&:nth-of-type(2n)
  border-bottom: none 

// -----更多参考内容-----
// 最后两个儿子
div:nth-last-child(-n+2) 
 border-top: none
// 依旧是全局的最后2个
div:nth-last-of-type(-n+2) 
 background: #888888
// 可能可以用的思路
div:last-child, div:nth-last-of-type(-n+2):not(:nth-child(even)) 
 color: red
// 可能是关键
h1:has(+ p)
   margin-bottom: 0
// 还有is和where可以使用, 形成矩阵式选择
:is(p,a,div) :is(li, a, p)


// input range写法 html:奶量
input[type=range]
    -webkit-appearance: none
    --boxAfterFontSize: 20px
    width: 800px
    background: red
    //此处&不可省略, 不然会是有空格的结果, 有空格, 代表对于子元素的描述
    &::-webkit-slider-runnable-track 
        // width: 50% 这个属性不生效
        height: 5px
        background: #acc
        border: none
        border-radius: 3px
    &::-webkit-slider-thumb 
        -webkit-appearance: none
        border: none
        height: 16px
        width:  var(--boxAfterFontSize)
        border-radius: 2px//50%
        background: goldenrod
        margin-top: -4px
    &:focus, &:hover
        outline: none
        // width: 500px
        // background: green

        &::-webkit-slider-runnable-track 
            background: #ccc

• 参考 https://stackoverflow.com/questions/34944698/how-can-i-select-odd-and-even-elements-with-css
• 搞了第n个元素的样式
• 参考mdn, 成功搞定:
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
  • https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
  • https://developer.mozilla.org/en-US/docs/Web/CSS/:has
  • 还有:is和:not也比较有用