CSS选择器总结

﹏ヽ暗。殇╰゛Y 2022-06-09 13:07 193阅读 0赞

**前言：CSS中的选择器比较多，但是平时自己在书写代码的时候使用的并不多，这里对其进行一个总结**

#### 常见选择器 ####

p {
        color: #ccc;
    }
    p a {
        font-size: .8rem;
    }
    #content {
        margin: 0 auto;
    }
    .header {
        height: 200px;
    }
    a:link {
        color: blue;
    }
    a:visited {
        color: green;
    }
    a:hover,
    a:focus,
    a:active {
        color: red; 
    }
    //已经访问的链接
    a:visited:hover {
        color: gray;
    }

#### 通用选择器 ####

//不建议这样使用
    * {
        padding: 0;
        margin: 0;
    }
    //li下面的所有元素
    #nav li * {
        background: red;
    }

#### 高级选择器 ####

//子选择器只是选择直接后台，而后台选择器则是选择所有后代
 #nav>li {
 list-style: none;
 }
 //相邻选择器,设置h2和h2下面第一个p标签的样式
 h2 + p {
 font-size: 1.6em;
 font-weight: 600;
 }
 //属性选择器
 a[rel='follow'] {
 padding-right: 30px;
 }
 //title中函数flower,例如title="flower" title="blue flower"，对于flower_one不能够选择
 [title~=flower] {
 width: 30px;
 height: 30px;
 background-color: orange;
 }
 //first-letter 每个段落的第一个字符
 p:first-letter {
 color: red;
 }
 //first-line 每个段落的第一行
 p:first-line {
 color: red;
 }
 //first-child 选择父级元素的第一个p元素，这里父元素可以是body
 //注意这里没有second-child
 p:first-child{
 color: orange;
 }
 //last-child 选择父级元素的最后一个p元素
 p:last-child {
 color: orange;
 }
 //before 每个p元素之前插入内容
 p:before {
 content: "welcome";
 clear: both;
 }
 //after 每个p元素之后插入内容
 p:after {
 content: "see you";
 clear: both;
 }
 //~ 父元素相同，p元素后面的所有ul元，这里body也当做父元素处理
 p~ul {
 color: orange;
 }
 //^ src以https开头的元素
 a[src^="https"] {
 color: orange;
 }
 //$ src以com结尾的元素
 a[src$=".com"] {
 color: orange;
 }
 //* class中包含test的元素,test_one,onetesting这些都是可以选择
 div[class*="test"] {
 color: orange;
 }
 //first-of-type 这个和first-child一样
 //last-of-type 这个和last-child一样
 //only-of-type 选择父级元素只有一个p元素的p元素
 p:only-of-type { 
 color: red;
 }
 //only-child 选择父级元素只有一个子元素的p元素(也就是一个div中只有一个p标签才可以选择)
 p:only-child {
 color: red;
 }
 //nth-child(n) 选择父级元素的第n个p元素，first-child的扩展，这里我们可以指定第几个,注意这里是从1开始，不是从0开始计数
 p:nth-child(2) {
 color: red;
 }
 //奇数行
 p:nth-child(odd) {
 
 }
 //偶数行
 p:nth-child(even) {
 }
 //nth-last-child(n) 和nth-child(n)类似，只是这里是从后向前计数
 p:nth-last-child(2) {
 color:red;
 }
 //nth-of-type(n)这个和nth-child(n)一样
 //nth-last-of-type(n) 这个和nth-last-child(n)一样
 //empty 元素p中没有内容
 p:empty{
 background: orange;
 }
 //target 这个选择器主要用在锚点，当通过锚点跳转到这里的时候，会执行目标选择器中的内容
 p:target{
 color: red;
 }
 <a href="#news1">content1</a>
 <a href="#news2">content2</a>
 
 内容 1...
 内容 2...
 //enabled 主要对于input使用，可以输入的input
 input:enabled {
 backgound: white;
 }
 //disabled 主要对于input使用，不可以输入的input
 input:disabled {
 background: gray;
 }

#### 选择器的特殊性 ####

特殊性越高就以它为准，如果特殊性相同，那么就写在后面的为准

#content { 100 }
    .content { 10 }
    p{ 1 }