活动可视化搭建（拖拽生成页面）
基于此开发一个活动可视化搭建项目，让运营可以通过，点击和拖拽组件，选择或导入数据的的方式，快速生成活动页面上线。
一．元素选择器
首先需要知道元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素
后代元素：直接或间接被祖先元素包含的元素
兄弟元素：拥有相同父元素的元素
二、后代元素选择器
作用：选中指定元素的指定后代元素。
语法：祖先元素 后代元素 {}（空格隔开）
div span {
color: red;
}
<div>
<span>第一个span。</span> <!–颜色为red–>
<span>第二个span。</span> <!–颜色为red–>
</div>
三、子元素选择器
作用：选择指定父元素的指定子元素
语法：父元素 > 子元素
div > span {
color: red;
}
<div>
<span>第一个span。</span> <!– 颜色为red –>
<span>第二个span。</span> <!– 颜色为red –>
<ul>
<span>ul下的span</span><!– 颜色不变 –>
</ul>
</div>
四、伪类
表示元素的一种特殊状态。
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。（隐私问题只能设置颜色）
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
::selection匹配被用户选中或处于高亮状态的部分。
a:link { /* 未访问的链接 */
color: #FF0000
}
五、伪元素
表示元素中一些特殊的位置。
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
h1:after {
content:url(logo.gif);
}
六、属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素。
语法：
[属性名] 选取含有指定属性的元素
[属性名=”属性值”] 选取含有指定属性值的元素
[属性名^=”属性值”] 选取属性值以指定内容开头的元素
[属性名$=”属性值”] 选取属性值以指定内容结尾的元素
[属性名*=”属性值”] 选取属性值以包含指定内容的元素
p[title] {
background-color: yellow;
}
p[title=”hello”] {
background-color: yellow;
}
<p title=”hello”>文字</p>
七、其他子元素选择器
:first-child
指定父元素中第一个元素且为指定元素的样式。
p:first-child { //匹配作为任何元素的第一个子元素的 p 元素
color: red;
}
<div>
<div>段落</div> <!–如果该元素为p，则字体为红色–>
<p>段落</p>
<p>段落</p>
</div>
<div>
<p>段落</p> <!–因为是div的第一个子元素且为p元素，所以字体为红色–>
<p>段落</p>
</div>
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
:last-child
指定父元素中最后一个元素且为指定元素的样式。
p:last-child { //匹配作为任何元素的第一个子元素的 p 元素
color: red;
}
<div>
<p>段落</p>
<p>段落</p>
<div>段落</div> <!–如果该元素为p，则字体为红色–>
</div>
<div>
<p>段落</p>
<p>段落</p> <!–因为是div的最后一个子元素且为p元素，所以字体为红色–>
</div>
提示：最常见的错误是认为 p:last-child 之类的选择器会选择 p 元素的最后一个元素。
:nth-child
匹配第n个位置，且为指定元素的元素。even表示偶数位置，odd表示奇数位置的元素。
p:nth-child(2) // 匹配其父元素的第二个子元素为 p 的颜色
{
color:red;
}
<div>
<div>段落</div>
<p>段落。</p>
<p>段落。</p>
</div>
:first-of-type
选择特定类型的第一个元素。
p:last-of-type
{
background:red;
}
<div>第一个段落。</div>
<p>第二个段落。</p> <!–颜色为red–>
<p>第三个段落。</p>
<p>第四个段落。</p>
:last-of-type
选择特定类型的最后一个元素。
p:last-of-type
{
background:red;
}
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p> <!–颜色为red–>
<div>第四个段落。</div>
:nth-of-type
选择特定类型的第n个元素。
p:nth-child(3) // 匹配其父元素的第二个子元素为 p 的背景色
{
background:red;
}
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p> <!–颜色为red–>
<div>第四个段落。</div>
八、兄弟元素选择器
作用：选择一个元素紧挨着的指定的兄弟（不能有任何元素隔着）
语法：元素1 ~ 元素2 （选中元素1的紧挨着的前一个元素是元素2的元素）；
元素1 + 元素2（选中元素1的紧挨着的后一个元素是元素2的元素）
否定伪类
作用：可以从已选中的元素中剔除某些元素
语法： :not(选择器)
p:not(.hello) {
background: yellow
}
<p>第一个段落。</p> <!– 背景yellow –>
<p>第二个段落。 <!– 无背景 –>
<p>第三个段落。</p> <!– 背景yellow –>
<p>第四个段落。</p> <!– 背景yellow –>
转载请注明：小猪云服务器租用推荐 » css元素选择器全面解析