简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 选择器的使用
Blogger Information
Blog 9
fans 1
comment 0
visits 9207
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选择器的使用
jiangxiaobai
Original
649 people have browsed it

相邻选择器和兄弟选择器的使用

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style/style1.css">
    <title>选择器的使用</title>
</head>
<body>
<ul class="main">
    <li class="one">one</li>
    <li id="two">two</li>
    <li class="one">three</li>
    <li>four</li>
    <li>five</li>
</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

实例

.main{
     margin: 0;
     padding: 0;
     border: 1px solid #ccc;
     width: 300px;
 }
ul>li{
    display: inline-block;
    border: 1px solid red;
    border-radius: 50%;
}
/*相邻选择器*/
#two+*{
    background-color: green;
}
/*兄弟选择器*/
#two～*{
     background-color: red;
 }
/*子元素选择器*/
ul :nth-child(4){
    background-color: yellow;
}
/*类型选择器*/
ul li:nth-of-type(2) {
    background-color: green;
    color: white;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行实例 »

点击 "运行实例" 按钮查看在线实例

相邻选择器只会修改当前元素后面元素的样式

兄弟选择器会修改当前元素后面跟他同级同标签的样式


nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

nth-of-type(n)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素


padding内编剧通常使用box-sizing: border-box;这个属性来解决。

同时也可以使用重新定制宽度来解决。

magin使用

实例

<div class="box">

</div>
<div class="box2">

</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

.box{
    width: 180px;
    height: 180px;
    background-color: greenyellow;
    margin-bottom: 200px;
}
.box2{
    width: 180px;
    height: 180px;
    background-color: red;
    margin-top: 150px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

同样设置的以那个大为准

Correction status：qualified

Teacher's comments：选择器的案例要多做一些
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！