css中的选择器

最新推荐文章于 2024-02-21 08:42:56 发布

june_ruikang

最新推荐文章于 2024-02-21 08:42:56 发布

阅读量280

点赞数

分类专栏： CSS-基础

本文链接：https://blog.csdn.net/june_ruikang/article/details/50997080

版权

CSS-基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
ul{
margin: 0;
padding: 10px 10px 10px 30px;
}
li{
margin: 1px;
font-family: "微软雅黑";
font-weight: 900;
}
/*元素选择符和关系选择符*/
/**：选择所有元素*/
/*E：选择指定类型的元素*/
/*E#myid：选择id属性等于myid的元素*/
/*E.myclass：选择class属性等于myclass的元素*/
/*E F :选择被E元素包含的元素F*/
/*E,F,G:选择所有E元素、F元素、G元素*/
/*E>F:选择所有E元素的子元素F*/
/*E+F:相邻选择符，选择紧贴在E元素知道后的F元素*/

/*属性选择符*/
/*E[attr]：选择具有attr属性的E元素*/
li[lang]{
background-color: aquamarine;
}
/*E[attr = "val"]：选择attr属性值等于value的E元素*/
li[lang = "ad"]{
background-color: #F60;
}
/*E[attr~="val"]选择具有attr属性，属性值用空格隔开，其中一个属性包含val值得E元素*/
li[lang~="aa"]{
background-color: blueviolet;
}
/*E[attr|="val"]：选择具有attr属性且属性值为一个用连字符-分隔的字词列表，由val开始的E元素*/
li[lang|="bb"]{
background-color:bisque ;
}
/*E[attr^="val"：选择具有attr属性且属性值为以val开头的字符串的E元素]*/
li[lang^="oop"]{
background-color: chocolate;
}
/*E[attr$="val"]：具有attr元素且属性值以val结尾的元素*/
li[lang$="oop"]{
background-color: crimson;
}
/*E[attr*="val"]：具有attr属性，且属性值包含val值得元素*/
li[lang*="ooop"]{
background-color: black;
}

/*结构伪类选择符*/
table{
border-collapse: collapse;
font-size: 12px;
width: 100%;
}
table td{
font-size: 12px;
padding: 0 3px;
line-height: 22px;
}
/*E:nth-child(n)匹配父元素的第n个子元素*/
tr:nth-child(even){
background-color: antiquewhite;
}
/*E:first-child匹配父元素的第一个子元素*/
tr:first-child{
background-color: burlywood;
}
/*E:root：选择匹配E所在文档的根元素*/
/*E：not(s)选择匹配所有不匹配简单选择符s的E元素*/
/*E：empty:匹配没有任何子元素的结点*/
/*E：target：匹配当前链接地址指向的元素E*/
/*E:first-child:匹配父元素的第一个元素*/
/*E：last-child:匹配父元素的最后一个子元素*/
/*E：nth-child(n)：匹配父元素的第n个子元素E*/
/*E：nth-last-child(n)：匹配父元素的倒数第n个子元素E*/
/*E：only-child：匹配父元素仅有的一个子元素E*/
/*E：first-of-type：匹配同类型中的第一个兄弟元素*/
/*E：last-of-type：匹配同类型中的最后一个兄弟元素*/
/*E：only-of-type：匹配同类型中的唯一一个兄弟元素*/
/*E：nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E*/
/*E：nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟元素*/

/*UI元素状态伪类选择符*/
/*E:link:设置超链接a未被访问前的样式*/
/*E：visited:设置超链接a在其链接地址已被访问过时的样式*/
/*E：hover：设置元素在其鼠标悬停时的样式*/
/*E：active：设置元素在被元素激活时的样式*/
/*E：focus：设置元素成为设置焦点的样式*/
/*E：checked：设置用户界面上处于选中状态的元素*/
/*E：enable：匹配所有用户界面上处于可用状态的元素*/
/*E：disable：匹配所有用户界面上处于禁用状态的元素E*/

/*伪元素选择符*/
/*E:first-letter/E::first-letter：设置对象内的第一个字符的样式：*/
/*E：first-line/E::first-line：设置对象内的第一行的样式*/
/*E：before/E::before:设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用*/
/*E:after/E::after：设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用*/
/*E：selection：设置对象被选择时的颜色*/
p:first-letter{
font-size: 24px;
font-weight: bold;
}
a[href$=docx]::before{
content:url(../img/doc.jpg);
}
a[href$=txt]::before{
content: url(../img/txt.jpg);
}
</style>
<body>
<ul>
<li lang="as">lang = af aaaaaaaaaaaaaaaaa</li>
<li lang="ad">lang = ad dddddddddddddddddd</li>
<li lang="sf">lang = sf ssssssssssssssssssss</li>
<li lang="de">lang =de dddddddddddddd</li>
<li lang="rt">lang = rt dddddddddddddd</li>
<li>lang = asfsd ddddddddddddddddddddd</li>
<li lang="aa re rt">lang = aa re rt</li>
<li lang="er hj aa ere">lang = er hj aa ere</li>
<li lang="qw er tyre fddfg">lang=qw er tyre fddfg</li>
<li lang="aa">lang = aa</li>
<li lang="bb-ii">lang = bb-ii</li>
<li lang="ii-iii-bb">lang = bb-ii</li>
<li lang="bb">lang = bb</li>
<li lang = "oopldkflkd">lang = oopldkflkd</li>
<li lang="oooofds">lang = oooofds</li>
<li lang="sndkfjloop">lang =sndkfjloop</li>
<li lang="oop">lang= oop</li>
<li lang="hbjklkjooopkjlkjlk">lang = hbjklkjoopkjlkjlk</li>
</ul>
<table width="90%" border="2" bordercolor="chocolate" cellpadding="0" cellspacing="0">
<tr><td>编号</td><td>标题</td><td>作者</td><td>时间</td></tr>
<tr><td>1</td><td>我的大学</td><td>高尔基</td><td>2016-09-12</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>
<p>以下是参考资料：<br>
<a href="../img/html5.docx">参考资料1</a><br />
<a href="../img/通知.txt">参考资料2</a>
</p>
</body>
</html>

june_ruikang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的选择器

ul{margin: 0;padding: 10px 10px 10px 30px; }li{margin: 1px;font-family: "微软雅黑";font-weight: 900;}/*元素选择符和关系选择符*//**：选择所有元素*//*E：选择指定类型的元素*//*E#myid：选择id属性等于myid的元素*//*E.mycla
复制链接

扫一扫