[CSS]CSS/CSS3选择器

来源：互联网发布：网络斗牛赌博作弊器编辑：程序博客网时间：2024/06/14 00:30

CSS选择器
- 标签选择器
- id选择器
- 类选择器
- 后代选择器
- 交集选择器
- 并集选择器
- 通配符
- 伪类选择器
  - after和before选择器
CSS3选择器
- 儿子选择器
- 序选择器
- 下一个兄弟选择器

CSS选择器

标签选择器

<!DOCTYPE html><html><head>    <title>我是页面</title>    <meta charset="utf-8">    <style type="text/css">        p{            color: red;        }    </style></head><body>    <p>哈哈</p>    <p>呵呵</p>    <p>嘿嘿</p></body></html>

所有的p标签的文字颜色，都变为红色

id选择器

<!DOCTYPE html><html><head>    <title>我是页面</title>    <meta charset="utf-8">    <style type="text/css">        #haha{            color: red;        }    </style></head><body>    <p id="haha">哈哈</p>    <p id="hehe">呵呵</p>    <p id="heihei">嘿嘿</p></body></html>

指定id的字体颜色变为红色，选择器使用#来选择指定id

类选择器

<!DOCTYPE html><html><head>    <title>我是页面</title>    <meta charset="utf-8">    <style type="text/css">        .important{            color: red;        }        .error{            text-decoration: underline;        }        .special{            font-size: 20px;        }    </style></head><body>    <p class="error important">哈哈</p>    <p class="error special">呵呵</p>    <p class="special important">嘿嘿</p></body></html>

最重要的选择器，不建议使用id选择器，id选择器主要供给给js使用。

后代选择器

<!DOCTYPE html><html><head>    <title>我是页面</title>    <meta charset="utf-8">    <style type="text/css">        .oneClass p .twoClass{            color: red;        }    </style></head><body>    <ul class="oneClass">        <li>我是大帅锅 <p>我真的真的好帅</p></li>        <li>我是大帅锅 <p>我真的真的 <span class="twoClass">好帅</span> </p></li>        <li>我是大帅锅 <p>我真的真的好帅</p></li>    </ul>    <ul>        <li>我是大帅锅 <p>我真的真的好帅</p></li>        <li>我是大帅锅 <p  class="twoClass">我真的真的好帅</p></li>        <li>我是大帅锅 <p>我真的真的好帅</p></li>    </ul></body></html>

空格代表后代（在标签内的标签，不一定是子标签），其中.oneClass p .twoClass代表将类oneClass中的p标签中的.twoClass类的颜色设置为红色

交集选择器

<!DOCTYPE html><html><head>    <title>test</title>    <meta charset="utf-8">    <style type="text/css">        p.special{            color: red;        }    </style></head><body>    <h3>我最帅</h3>    <h3>我最帅</h3>    <h3 class="special">我最帅</h3>    <p class="special">我最帅</p>    <p class="special">我最帅</p>    <p>我最帅</p></body></html>

交集选择器用在这种情况下，当两个不同的标签处于不同的类时，要想为其中一个设置style，就需要交集选择器了

并集选择器

<!DOCTYPE html><html><head>    <title>test</title>    <meta charset="utf-8">    <style type="text/css">        h3,p{            color: red;        }    </style></head><body>    <h3>我最帅</h3>    <h3>我最帅</h3>    <ul>        <li>我最帅</li>    </ul>    <p>我最帅</p>    <p>我最帅</p></body></html>

通配符*

用于初始化，效率极低。

*{}

伪类选择器

伪类选择器是一种设置标签状态效果的选择器，以：表示
常见的伪类选择器有：

        a:link{            /*用户没有点击链接时的样式*/            color: blue;        }        a:visited{            /*用户访问后的样式*/            color: orange;        }        a:hover{            /*用户鼠标悬停的样式*/            color: green;        }        a:active{         /*用户鼠标按住链接时的样式*/            color: black;        }

爱恨准则，必须按上面的顺序写，不然将会失效：love hate。

after和before选择器

p:after{     /*再每个p标签后面插入新的内容*/    content:"台词：";    /*为插入的内容设置样式*/    background-color:yellow;    color:red;    font-weight:bold;}p:before{    /*为每个p标签前插入新的内容*/}

CSS3选择器

儿子选择器

IE7开始兼容

<!DOCTYPE html><html><head>    <title>test</title>    <meta charset="utf-8">    <style type="text/css">        div>ul>li>p{            color: red;        }    </style></head><body>    <h3>我最帅</h3>    <div>        <ul>            <li>哈 哈 哈 哈</li>            <li><p>红了！！！</p></li>            <li>哈 哈 哈 哈</li>        </ul>    </div></body></html>

序选择器

IE8开始兼容

<!DOCTYPE html><html><head>    <title>test</title>    <meta charset="utf-8">    <style type="text/css">        ul li:first-child{            color: red;        }    </style></head><body>    <h3>我最帅</h3>    <div>        <ul>            <li>哈 哈 哈 哈</li>            <li><p>红了！！！</p></li>            <li>哈 哈 哈 哈</li>        </ul>    </div></body></html>

使用冒号后面加位置属性，比如first-child last-child
兼容替代：

<style type="text/css">        ul li.first{            color: red;        }    </style><ul>    <li class="first">哈 哈 哈 哈</li>    <li><p>红了！！！</p></li>    <li class="last">哈 哈 哈 哈</li></ul>

下一个兄弟选择器

IE7开始兼容

<!DOCTYPE html><html><head>    <title>test</title>    <meta charset="utf-8">    <style type="text/css">        h3+p{            color: red;        }    </style></head><body>    <h3>我最帅</h3>    <p>我知道</p>    <p>我知道</p>    <p>我知道</p>    <h3>我最帅</h3>    <p>我知道</p>    <p>我知道</p>    <p>我知道</p></body></html>

h3 后面的紧挨着的第一个p兄弟变红

1 0