CSS选择器

最新推荐文章于 2025-03-06 12:11:45 发布

天使小宝

最新推荐文章于 2025-03-06 12:11:45 发布

阅读量572

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/myjlvzlp/article/details/8171394

CSS 专栏收录该内容

13 篇文章

订阅专栏

1、后代元素选择器的理解

h1{

color:red;

}

只对 h1 元素中的 em 元素应用样式

h1 em{

color:blue;

}

如：<h1>maoyuanjun<em>zoulingpei</em></h1>

zoulingpei字体为蓝色；maoyuanjun字体为红色。

2、关于继承的理解

例1：

h1{
       color:red;
       text-decoration: underline;
}
h1 em{
       color:blue;
       background-color: green;
}

em中继承h1中的样式，如果em中含有h1中的样式，则会覆盖h1中的样式，相当于em中的样式为：

em{
       color:blue;
       text-decoration: underline;
       background-color: green;
}

注意：em只继承h1中可以被继承的样式。

例2：

.main{
       margin: 50px auto;
       height: 400px;
       border: 1px solid red;
}
.childred{
       margin: 100px;
       border: 1px solid blue;
       color:red;
}
</style>
 
<divid="test" class="main childred">
       1111111111
</div>

div包含两个Css类，分别是main和childred，至于main和childred在class里面的先后顺序无关，即class="main childred"和class="childred main"是等价的。但是在style里面的顺序变了的话，就会影响整体的样式，如上面style中childred类排在main类的后面，则div最终的样式如下：

.main {
       height: 400px;
}
.childred {
       margin: 100px;
       border: 1px solid blue;
       color: red;
}
合并起来就是
{
       margin: 100px;
       border: 1px solid blue;
       color: red;
       height: 400px;
}

childred和mian里面有相同的margin和border样式，但是childred排在main的后面，覆盖了main中的margin和border样式.如果mian放在childred的后面，

<style>
.childred{
       margin: 100px;
       border: 1px solid blue;
       color:red;
}
.main{
       margin: 50px auto;
       height: 400px;
       border: 1px solid red;
}
</style>
最终的样式如下：
{
       margin: 50px auto;
       height: 400px;
       border: 1px solid red;
       color: red;
}

main排在childred的后面，覆盖了childred中的margin和border样式.

还有有待理解的：

.main{
       margin: 50px auto;
       height: 400px;
       border: 1px solid red;
}
.childred{
       margin: 100px;
       border: 1px solid blue;
       color:red;
}
.main .childred{
       color:green;
}
 
<divid="test" class="main childred">
       111
       <div id="test3"class="childred">
              333
       </div>
</div>
<divid="test1" class="childred">
       222
</div>

id为test的DIV样式：

{

margin: 100px;

border: 1px solid blue;

color: red;

height: 400px;

}

id为test1的DIV样式：

{

margin: 100px;

border: 1px solid blue;

color: red;

}

不管是下面的顺序

.main .childred{

color:green;

}

.childred{

margin: 100px;

border: 1px solid blue;

color:red;

}

还是

.childred{

margin: 100px;

border: 1px solid blue;

color:red;

}

.main .childred{

color:green;

}

的顺序，id为test3的DIV样式：

.main .childred {

color: green;

margin: 100px;

border: 1px solid blue;

}

3、后代选择器

例1：

.test{
       height: 100px;
       border: 1px solid red;
}
div.test{
       color: red;
       border: 1px solid blue;
}
p.test{
       width: 100px;
       color: gold;
       border: 1px solid green;
}
<divclass="test">
       1111
</div>
<pclass="test">22222222</p>

最终DIV的样式为：

{

color: red;

height: 100px;

border: 1px solid blue;

}

最终P的样式为：

{

width: 100px;

color: gold;

border: 1px solid green;

height: 100px;

}

例2：

a:link{
       text-decoration: none;
       background-color: red;
}
span a:link{
       background-color: grey;
}
<spanclass="test"><ahref="#">maoyuanjun</a></span>
<ahref="#">maoyuanjun</a>

最终span中的a的样式为：

{

text-decoration: none;

background-color: grey;

}

外面的a的样式为：

{

text-decoration: none;

background-color: red;

}

4、属性选择器

例1：

 a{
       color: red;
       text-decoration: none;
}
//对有 href 属性的锚（a 元素）应用样式
a[href]{
       color: blue;
}
//将同时有 href 和 title 属性的 HTML 超链接的文本设置为green
a[href][title]{
       color: green;
}
<a>maoyuanjun</a>
<ahref="#">maoyuanjun</a>
<ahref="#" title="mao">maoyuanjun</a>

注意：属性与属性值必须完全匹配

.test{
       color: red;
}
.test1{
       color: blue;
}
.test2{
       color: green;
}
div[class="test"]{
       background-color: red;
}
<divclass="test test1">
       1111
</div>
<divclass="test2">
        2222
</div>

其中

div[class="test"]{

background-color: red;

}无法匹配

<divclass="test test1">

1111

</div>

即使改成

div[class="test1test"]{

background-color: red;

}也无法匹配。必须改成

div[class="testtest1"]{

background-color: red;

}

才能完全匹配。也可以改成如下形式：

div[class~="test"]{

background-color: red;

}

也可以匹配

<divclass="test test1">

1111

</div>

5、相邻兄弟选择器

实例：如果要增加紧接在 h1 元素后出现的段落的字体颜色

h1 + p{
       color:red;
}
<h1>HelloWorld!</h1>
<p>111111111111</p>
<p>222222222222</p>
<p>333333333333</p>

只有第一个p元素的样式为{color:red;}即111111111111变位红色，222222222222和333333333333不变色。

注意：用一个结合符只能选择两个相邻兄弟中的第二个元素。

例1：

li + li{font-weight:bold;}
<div>
<ul>
       <li>List item 1</li>
       <li>List item 2</li>
       <li>List item 3</li>
</ul>
<ol>
       <li>List item 1</li>
       <li>List item 2</li>
       <li>List item 3</li>
</ol>
</div>

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

即ul中的<li>List item 2</li>和<li>List item 3</li>以及ol中的<li>List item 2</li>

和<li>List item 3</li>变为了粗体。

6、子元素选择器

选择只作为 h1 元素子元素的 strong 元素

h1 > strong{
       color: red;
}
<h1>maoyuanjun<strong>111111</strong></h1>
<h1>maoyuanjun<em>22222<strong>3333</strong>44444</em></h1>

第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响