css中的一些选择符

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

css中的⼀些选择符
1.通配符选择
*{margin: 0;padding: 0;}
有时候可以对特定元素的所有后代元素应⽤样式
<style>
* {color: #000000;}
p{color:red}
p * {color:green}
</style>
<p>我是第⼀个p标签<p>
<div>我是路⼈</div>
<p>我是什么颜⾊<span>maybe I am green.</span><strong>what is my color?</strong></p>
结果如下：
2.类选择符
.className{ color :red}
3.标签选择符 a p img 等都属于标签选择
4.id选择符 #title{color:red}
在⼀个html⽂档中，id选择器会使⽤⼀次，⽽且仅⼀次。

不过在实际中，浏览器通常并不检查HTML中ID的唯⼀性，这意味着如果你在HTML⽂档中设置了多个有相同ID属性值的元素，这些元素会具有相同的样式。

但是这样写是不正确的。

此外如果⽤到了getElementById（）之类的函数，会给DOM脚本的编写带来⿇烦。

和类选择器不同，ID属性不允许以空格分割词的形式复制给某个标签例如 <p class="warning fl" id="warning"></p>
5.选择符的组合关系
针对性使⽤类选择符或者ID选择符例如：p .content{color:red}
选择符群组，多个不同的选择符有相同的属性 p, .content, #title{color:red}
选择符组合:根据html的结构关系，层层递进的罗列选择符，⽬标选择符为最后⼀个选择符。

每个选择符之间使⽤空格分割且为⽗⼦关系。

p span{color:red}
元素之间存在⽗⼦关系：
6.包含选择符（派⽣选择符或后代选择器）
<style type="text/css">
p strong span {
color:#FF0000; /*定义p标签所包含的span标签内的⽂字颜⾊为红⾊*/
font-size:18px; /*定义⽂字⼤⼩为18px*/
text-decoration:underline; /*定义⽂字具有下划线*/
}
</style>
<title>包含选择符</title>
</head>
<body>
<p>CSS很强⼤，<strong>可以控制页⾯<span>任何元素</span>的样式</strong ></p>
<strong>与世界同步，做⼀个成功的页⾯仔</strong>
</body>
注：关于后代选择器有⼀个常被忽略的⽅⾯，即两个元素之间的层次可以是⽆限的。

例如 ul em{ ...},这种语法就回选择从ul元素继承的所有em元素，不论em嵌套层次有多深。

<ul>
<li>
<ol>
<li>List item 1_1</li>
<li>List item 1_2</li>
</ol>
</li>
</ul>
7.⼦选择符
body > p > strong
8.相邻选择符
p + strong:作⽤是匹配同⼀个⽗级下某个元素之后的元素
<style type="text/css">
p + strong {
color:#FF0000; /*定义p标签所包含的span标签内的⽂字颜⾊为红⾊*/
font-size:18px; /*定义⽂字⼤⼩为18px*/
text-decoration:underline; /*定义⽂字具有下划线*/
}
</style>
<title>相邻选择符</title>
</head>
<body>
<p>CSS很强⼤，<strong>可以控制页⾯<span>任何元素</span>的样式</strong ></p>
<strong>与世界同步，做⼀个成功的页⾯仔</strong>
</body>
进⼀步深⼊学习 p+strong+strong
<style type="text/css">
strong + strong {
color:#FF0000; /*定义p标签所包含的span标签内的⽂字颜⾊为红⾊*/
font-size:18px; /*定义⽂字⼤⼩为18px*/
text-decoration:underline; /*定义⽂字具有下划线*/
}
</style>
<title>对相邻选择符的进⼀步了解</title>
</head>
<body>
<p>CSS很强⼤，<strong>可以控制页⾯<span>任何元素</span>的样式</strong ></p>
<strong>1、与世界同步，做⼀个成功的页⾯仔</strong>
<strong>2、让我们看看CSS的世界是多么奇妙吧！</strong>
<strong>3、千万不要仅仅因为这么⼀点内容就满⾜了。

</strong>
<strong>4、我们需要了解的还有很多！</strong>
<strong>5、为了更便于浏览，加个数字玩玩</strong>
</body>
p+strong+strong定义的标签为与strong标签相邻的strong标签。

标签间相邻是层层递进的关系。

9.属性选择符
任何⼀个html标签都有属性存在，且每个属性都有属性值。

例如img的alt属性，针对所有带有alt属性的图像。

属性选择符格式是标签元素后紧跟⼀对中括号，中括号的内容是该标签元素的属性或表达式，有如下四种模式: E[attr] 例如 *[class] 表⽰页⾯中所有带有class属性的标签;img[alt]
E[attr=“value”] 例如 input[type="text"] 试⽤对象如下：
<input type="text" value="⽂本"/>
注：这种格式要求必须与属性值完全匹配，如果遇到值本⾝包含⼀个空格分个的值列表（如HTML属性class），匹配就会出现问题。

<planet type="barren rocky">Mercury</p>
要根据具体属性值匹配这个元素，唯⼀的办法就是写成：
planet[type="barren rocky"]{font-weight:bold;}
如果写成planet[type="barren"]这个规则不能匹配⽰例标记，因⽽失败。

HTML中的class也是如此。

因此这种匹配属于完全匹配。

后⾯的⼀些写法可以让属性匹配更加灵活。

E[attr~=“value”] 匹配具有attr属性且属性值是具有空格符号隔开的字段，其中⼀个字段等于value的E标签
<style type="text/css">
p[title~="css"] {
font-size:20px;
color:#FF0000;
margin:0;
}
</style>
<title>E[attr~="value"]属性选择符</title>
</head>
<body>
<p title="css xhtml">title属性值为xhtml css的段落标签p</p>
<p title="css+xhtml">title属性值为css xhtml的段落标签p</p>
<p title="Cascading Style Sheets（层叠样式表）的简称为 css">title属性值为“Cascading Style Sheets（层叠样式表）的简称为css”的段落标签p</p>
</body>
E[attr|=“value”] 匹配具有“attr”属性且属性值必须是以value值开始及使⽤连字符（-）分隔的E标签元素
<style type="text/css">
p[title|="css"] {
font-size:20px;
color:#FF0000;
margin:0;
}
</style>
<title>E[attr|="value"]属性选择符</title>
</head>
<body>
<p title="xhtml-css">title属性值为xhtml-css的段落标签p</p>
<p title="css+xhtml">title属性值为css+xhtml的段落标签p</p>
<p title="css-Cascading Style Sheets（层叠样式表）的简称">title属性值为“css-Cascading Style Sheets（层叠样式表）的简称”的段落标签p</p>
</body>
E[attr^=“value”] 匹配具有“attr”属性且属性值必须是以value值开头的所有元素
E[attr$=“value”] 匹配具有“attr”属性且属性值必须是以value值结尾的所有元素
E[attr*=“value”] 匹配具有“attr”属性且包含⼦串value的所有元素
10.伪类,伪对象
选择符：伪类{属性：属性值；}
a:link{color:red;}
a:visited{color:blue;}
a:hover{color:green;}
a:active{color:black;}
注：
1.a：link 代表作为超链接（即有⼀个href属性）并指向⼀个未访问地址的所有锚。

这看起来有点多余，因为⼀个锚尚未被访问，我们可以⽤a{color:red}来代替。

不过其实不是这样的，因为a{color:red}规则不仅应⽤于未访问的链接，还会应⽤到下⾯的锚：
<a name="section4">4.The Lives of Meer</a>
因此为了避免将链接样式应⽤到⽬标锚，要使⽤：link伪类
2.⼀般建议按link-visited-hover-active的顺序声明链接样式。

否则因为css声明的层级关系会出现覆盖的现象。

选择符：伪对象{属性：属性值；}
<style>
p:before{content: "4⽉1⽇，";}
p:after{content: ',⼤家⼩⼼不要被骗了！';}
</style>
</head>
<body>
<p>愚⼈节要到了</p>
</body>
IE6,7浏览器不⽀持，其他浏览器的效果如下：
11.选择符的权重值优先级别
<style type="text/css">
p {
color:blue;
}
p.myColor {
color:black;
}
.myColor {
color:yellow;
}
#myColor {
color:greenyellow;
}
</style>
<title>选择符的权重值以及优先级别</title>
</head>
<body>
<p>你猜猜我是什么颜⾊的，猜对了有奖哦。

^o^</p>
<p class="myColor">你猜猜我是什么颜⾊的，猜对了有奖哦。

^o^</p>
<p class="myColor" id="myColor">你猜猜我是什么颜⾊的，猜对了有奖哦。

^o^</p>
<p style="color:red;" class="myColor" id="myColor">你猜猜我是什么颜⾊的，猜对了有奖哦。

^o^</p> </body>
标签选择符、伪类及伪对象：优先级分数 1。

类选择符、属性选择符：优先级分数 10。

ID选择符：优先级积分为100。

style属性：优先级积分为1000。

其他选择符，如通配选择符等：优先级积分为0。

！important优先级最⾼。

^o^</p>
<p class="myColor">你猜猜我是什么颜⾊的，猜对了有奖哦。

^o^</p>
<p class="myColor" id="myColor">你猜猜我是什么颜⾊的，猜对了有奖哦。

^o^</p>
<p style="color:red;" class="myColor" id="myColor">你猜猜我是什么颜⾊的，猜对了有奖哦。

^o^</p> </body>
12.css3中新出现的选择符
x:nth-child(n)
li:nth-child(3) { color: red; }
⽤于选取 stack 中的某⼀个元素，只接受整数作参数（参数从 1 开始计数），如果你想选取第⼆个 li 元素，只需这样写 li:nth-child(2)。

也可以设定可变的参数，⽐如 li:nth-child(4n) 将选取第 4, 8 , 12… 个元素（4*n, n=1, n++）。

x:nth-last-child(n)
li:nth-last-child(2) { color: red; }
除了正序（从上往下）选择，也可以使⽤ :nth-last-child(n) 倒序（从下往上）选择第⼏个元素，其他⽤法与第 1 条完全⼀样。

x:nth-of-type(n)
ul:nth-of-type(3) { color: red; }
nth-of-type(n) 的作⽤不是选取⼦元素 (child element)，⽽是选取同类元素 (type of element)。

想象⼀下 HTML ⽂件中包含 5 个 ul 元素，现在要选取第三个，只需使⽤上⾯的代码，⽽不⽤再单独这个 ul 添加 id
x:nth-of-type(n)
ul:nth-last-of-type(3) { color: red; }
注：
nth-child 与 :nth-of-type 的区别，简单来说，如果⽗层内只包含⼀种元素（⽐如都是 p 元素）那两种⽤法是等效的，如果⽗层包含多种元素（⽐如 p 元素与同级的其他元素），需要选取第⼏个 p 元素时应该⽤ :nth-of-type。