css的其他选择器 (基础选择器、关系选择器、属性选择器、伪类选择器、伪对象选择器)
关系选择器
1.包含选择器(E F)如:ul li{color:red;}
2.子选择器(E>F)E元素的直接子元素F,对更深一层的元素不起作用
3.相邻选择器(E+F)E元素之后的F元素,选择相邻的第一个兄弟元素
4.兄弟选择器(E~F)E元素之后的所有兄弟元素F,作用于多个元素
属性选择器 (通过[]进行定义)
E[att] 选择具有att属性的E元素 如:p[display]{color:red;}//选择带有display属性的p标签。
E[att="val"]选择具有att属性值等于val的E元素。
E[att$="val"] 选择具有att属性且属性值为val结尾的字符串的元素 如:
p[class$="1"]{color:red;}
<p class="p1">设创森啊哦</p>
<p class="f f p1 p">设创森啊哦</p>
<p class="a1 p1 pf">设创森啊哦</p>
<p class="a1 ff p1">设创森啊哦</p>
E[att^="val"] 选择E元素中有att属性且以“val”开头的元素
p[class^="a"]{color:red;}
<p class="p1">设创森啊哦</p>
<p class="f f p1 p">设创森啊哦</p>
<p class="a1 p1 pf">设创森啊哦</p>
<p class="a1 ff p1">设创森啊哦</p>
E[att*="val"] 选择具有att属性且属性值包含val的字符串的E元素
a[href*="www"]{font-size:20px;}
<a href="#">一个链接</a>
<a href="http://www.baidu.com">一个链接</a>
<a href="http://www.360.com">一个链接</a>
E[att~="val"] 选择有att属性且属性值列表中有一个复合val的元素
p[class~="a1"]{color:red;}
<p class="p1">设创森啊哦</p>
<p class="f f p1 p">设创森啊哦</p>
<p class="a1 p1 pf">设创森啊哦</p>
<p class="a1 ff p1">设创森啊哦</p>
伪类选择器 一般通过冒号进行定义
E:link 设置超链接a在未被访问前的样式(特指a标签)
E:visited 设置超链接a在其链接地址已被访问过时的样式(特指a标签)
E:hover 设置鼠标悬停在元素上时的样式。不限于a标签,p、li也可以使用
E:active 设置元素在鼠标按下时的样式(不限于a标签)
E:not(s) 匹配不含有s选择器的元素E
如:
<style>
a:link{color: green;}
a:visited{color: blueviolet;}
a:hover{color: yellow;}
a:active{color: orange;}
a:not(.a1){background: blue;}
</style>
<a href="#" class="a1">一个链接</a>
<a href="http://www.baidu.com">一个链接</a>
<a href="http://www.360.com">一个链接</a>
E:first-child 父元素的第一个子元素E 满足两个条件(必须有父元素;它是父元素的第一个元素)
E:last-child 父元素的最后一个子元素E
E:only-child E元素是唯一的子元素时被匹配
<style>
P:only-child{color:red;}
</style>
<body>
<p>这是段落段落</p>
</body>
E:empty 匹配没有任何子元素(并且不包括空格、回车)的元素E
<style>
P:empty{border: 1px solid red;padding: 10px;}
</style>
<p>这是段落段落</p>
<p></p>
<p>这是段落 <a href="#">落段</a></p>
E:checked 匹配用户界面上处于选中状态的元素E。(用于input type 为radio与CheckBox时)
input:checked+span{color:red;}
<input type="radio" name="gender" /><span>男生</span>
<input type="radio" name="gender" checked="checked"/><span>女声</span>
伪对象选择器 伪对象也叫伪元素,用两个冒号来定义。
伪类和伪对象(元素)的区别
伪类一般反映无法在css中轻松或者可靠检测的某个元素的状态或属性;
伪元素表示DOM外部的某种文档结构
常用的伪元素 E:before/E::before E:after/E::after
伪元素是在元素内容的前面或后面定义的,必须要添加content:""这个属性才能定义成功。
如: p::after{content:"在p标签后加了内容";color:red;}
checked+伪元素练习:
input:checked+span{color: red;}
input:checked+span::after{content: "已被选!!";color: red;}
<form action="">
<fieldset>
<legend>选择:</legend>
<ul>
<li><label><input type="radio" name="col" value="0"/><span>绿色 </span></label></li>
<li><label><input type="radio" name="col" value="1"/><span>红色 </span></label></li>
<li><label><input type="radio" name="col" value="2"/><span>黄色 </span></label></li>
</ul>
</fieldset>
</form>
<form action="">
<fieldset>
<legend>选择内容:</legend>
<ul>
<li><label for=""><input type="checkbox" value="4" name="nr"/><span>大一</span></label></li>
<li><label for=""><input type="checkbox" value="5" name="nr"/><span>大二</span></label></li>
<li><label for=""><input type="checkbox" value="6" name="nr"/><span>大三</span></label></li>
</ul>
</fieldset>
</form>
关系选择器
1.包含选择器(E F)如:ul li{color:red;}
2.子选择器(E>F)E元素的直接子元素F,对更深一层的元素不起作用
3.相邻选择器(E+F)E元素之后的F元素,选择相邻的第一个兄弟元素
4.兄弟选择器(E~F)E元素之后的所有兄弟元素F,作用于多个元素
属性选择器 (通过[]进行定义)
E[att] 选择具有att属性的E元素 如:p[display]{color:red;}//选择带有display属性的p标签。
E[att="val"]选择具有att属性值等于val的E元素。
E[att$="val"] 选择具有att属性且属性值为val结尾的字符串的元素 如:
p[class$="1"]{color:red;}
<p class="p1">设创森啊哦</p>
<p class="f f p1 p">设创森啊哦</p>
<p class="a1 p1 pf">设创森啊哦</p>
<p class="a1 ff p1">设创森啊哦</p>
E[att^="val"] 选择E元素中有att属性且以“val”开头的元素
p[class^="a"]{color:red;}
<p class="p1">设创森啊哦</p>
<p class="f f p1 p">设创森啊哦</p>
<p class="a1 p1 pf">设创森啊哦</p>
<p class="a1 ff p1">设创森啊哦</p>
E[att*="val"] 选择具有att属性且属性值包含val的字符串的E元素
a[href*="www"]{font-size:20px;}
<a href="#">一个链接</a>
<a href="http://www.baidu.com">一个链接</a>
<a href="http://www.360.com">一个链接</a>
E[att~="val"] 选择有att属性且属性值列表中有一个复合val的元素
p[class~="a1"]{color:red;}
<p class="p1">设创森啊哦</p>
<p class="f f p1 p">设创森啊哦</p>
<p class="a1 p1 pf">设创森啊哦</p>
<p class="a1 ff p1">设创森啊哦</p>
伪类选择器 一般通过冒号进行定义
E:link 设置超链接a在未被访问前的样式(特指a标签)
E:visited 设置超链接a在其链接地址已被访问过时的样式(特指a标签)
E:hover 设置鼠标悬停在元素上时的样式。不限于a标签,p、li也可以使用
E:active 设置元素在鼠标按下时的样式(不限于a标签)
E:not(s) 匹配不含有s选择器的元素E
如:
<style>
a:link{color: green;}
a:visited{color: blueviolet;}
a:hover{color: yellow;}
a:active{color: orange;}
a:not(.a1){background: blue;}
</style>
<a href="#" class="a1">一个链接</a>
<a href="http://www.baidu.com">一个链接</a>
<a href="http://www.360.com">一个链接</a>
E:first-child 父元素的第一个子元素E 满足两个条件(必须有父元素;它是父元素的第一个元素)
E:last-child 父元素的最后一个子元素E
E:only-child E元素是唯一的子元素时被匹配
<style>
P:only-child{color:red;}
</style>
<body>
<p>这是段落段落</p>
</body>
E:empty 匹配没有任何子元素(并且不包括空格、回车)的元素E
<style>
P:empty{border: 1px solid red;padding: 10px;}
</style>
<p>这是段落段落</p>
<p></p>
<p>这是段落 <a href="#">落段</a></p>
E:checked 匹配用户界面上处于选中状态的元素E。(用于input type 为radio与CheckBox时)
input:checked+span{color:red;}
<input type="radio" name="gender" /><span>男生</span>
<input type="radio" name="gender" checked="checked"/><span>女声</span>
伪对象选择器 伪对象也叫伪元素,用两个冒号来定义。
伪类和伪对象(元素)的区别
伪类一般反映无法在css中轻松或者可靠检测的某个元素的状态或属性;
伪元素表示DOM外部的某种文档结构
常用的伪元素 E:before/E::before E:after/E::after
伪元素是在元素内容的前面或后面定义的,必须要添加content:""这个属性才能定义成功。
如: p::after{content:"在p标签后加了内容";color:red;}
checked+伪元素练习:
input:checked+span{color: red;}
input:checked+span::after{content: "已被选!!";color: red;}
<form action="">
<fieldset>
<legend>选择:</legend>
<ul>
<li><label><input type="radio" name="col" value="0"/><span>绿色 </span></label></li>
<li><label><input type="radio" name="col" value="1"/><span>红色 </span></label></li>
<li><label><input type="radio" name="col" value="2"/><span>黄色 </span></label></li>
</ul>
</fieldset>
</form>
<form action="">
<fieldset>
<legend>选择内容:</legend>
<ul>
<li><label for=""><input type="checkbox" value="4" name="nr"/><span>大一</span></label></li>
<li><label for=""><input type="checkbox" value="5" name="nr"/><span>大二</span></label></li>
<li><label for=""><input type="checkbox" value="6" name="nr"/><span>大三</span></label></li>
</ul>
</fieldset>
</form>