css的选择器

来源：互联网发布：西门子仿真软件编辑：程序博客网时间：2024/06/07 03:24

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>

阅读全文

0 0