CSS选择器

来源：互联网发布：网络暴力相关事件编辑：程序博客网时间：2024/06/05 02:08

1关系选择器

（1）后代选择器：可以选择一个元素的后代元素。这个后代元素包括儿子、孙子...........

写法：E（元素） F（父元素）

案例

.content a{    font-size: 30px;}<body>    <h1>中央气象台继续发布高温橙色预警局地超40度</h1>    <divclass="content">        <p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>        <ahref="http://www.huadianedu.com">前往现场</a>    </div>    <ahref="http://www.huadianedu.com">查看原文</a></body>

（2）子元素选择器：某一个元素选中直接后代元素。

写法：E > F（“>”英文状态输入下输入）

<styletype="text/css">    .content > a{        font-size: 30px;    }</style>   <h1>中央气象台继续发布高温橙色预警局地超40度</h1>    <divclass="content">        <p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>        <ahref="http://www.huadianedu.com">前往现场</a>    </div>    <ahref="http://www.huadianedu.com">查看原文</a></body>

2并选择器

将相同的样式放在一起，类名直接用英文逗号分隔。

写法：E , E （中间用英文的逗号分隔）

案例：

.div1,.div2{    position: relative;    width: 100px;    height: 100px;}.div1{    border: 1px solid yellow;}.div2{    border: 1px solid blue;}<body>    <divclass="div1 ">我是div1</div>    <divclass="div2">我是div2</div></body>

3通配符选择器

通配符选择器可以选中页面所有的标签

写法：*{}

案例：

<styletype="text/css">    *{        padding: 0;        margin: 0;    }</style><body>    <h1>中央气象台继续发布高温橙色预警局地超40度</h1>    <divclass="content">        <p>预计南、<span><ahref="http://www.huadianedu.com">重庆</a></span>等地方<ahref="http://www.huadianedu.com">35℃</a>以上的高温天气</p>        <ahref="http://www.huadianedu.com">前往现场</a>    </div>    <ahref="http://www.huadianedu.com">查看原文</a></body>

注意：通配符选择器对页面所有的元素都会设置对应的样式，而实际上呢，有很多元素默认是不带任何的样式的。

4兄弟选择器

（1）写法：E + F 选中最近的一个“弟弟”元素。不选中自己。

.go-to+a{   font-size: 20px;}<body>    <h1>中央气象台继续发布高温橙色预警局地超40度</h1>    <divclass="content">        <ahref="http://www.huadianedu.com">前往现场</a>        <a  class="go-to"href="http://www.huadianedu.com">前往现场1</a>        <ahref="http://www.huadianedu.com">前往现场2</a>        <ahref="http://www.huadianedu.com">前往现场3</a>    </div></body>

（2）写法：E ~ F 选中所有的“弟弟”元素，不选中自己

案例：

<styletype="text/css">    div{        min-height: 30px;        max-width: 300px;        background-color:white;        margin-left: 50px;        border: 1px solid red;    }    #myself  ~ div{        background-color:yellowgreen;    }</style><divid="myself">    <p>我</p>    <div>        <p>大儿子</p>        <div>大孙子</div>        <div>二孙子</div>    </div>    <div>二儿子</div>    <div>小儿子</div></div><div>二弟</div><div>三弟</div>

5伪类、伪元素选择器

1伪类选择器：条件一、根据元素不同的状态，自动选择不同的样式。或条件二、直接添加一个class（类），给这个class设定特殊的样式

li:first-child

a:hover:鼠标划过的时候添加样式

a:active：被激活的时候添加样式。点击那一时刻（按住鼠标左键不放）

a:link :链接地址未被访问时候添加的状态。必须设置href属性。

a:vistied：链接地址点击之后添加的样式。必须设置href属性

input:focus :拥有键盘输入获取焦点时候添加的样式

2伪元素选择器：

（2.1）需要设置特殊效果的内容放到一个元素（标签）里面span

（2.2）在添加一个class，对class设置特殊样式。

P:first-letter、p:first-line、p:before、p:after

E:before

li:after{    content:"。";    color: blue;}

阅读全文

0 0