最后
由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容
选择了具有href属性和title属性,且href的value为http://www.csdn.com.cn/,title的value为csdn的a元素。
选择属性包含某一值的元素:
说明:只要p元素包含了title1,就会被选择
I will be choosen!
p[title ~= “title1”] {color:red};
总结:
-
可以选择具有某一属性的所有元素或特定某类元素
-
可以选择具有多个属性的所有元素或特定某类元素
-
可以选择属性为具体某个值的元素
-
可以选择属性包含某个值的元素
====================================================================
-
按link、visited、hover、active的顺序
-
link表示未访问时的状态
-
visited表示访问过的状态
-
hover表示鼠标悬停在上面时的状态
-
active表示鼠标已经按下但未释放时的状态
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
类型1、p:first-child
官方定义好像不是太好理解?到底如何匹配p元素?
没关系,可以按下面去的表述去尝试理解:
-
首先,可以明确的是,p:first-child所要匹配的一定是p元素
-
再者,判断该p元素是否是其父元素的第一个子元素
-
如果是,那么就匹配;否则不匹配
先看第一个例子:
p:first-child{ color:red; }
1
2
3
4
结果:1和3会变成红色,2和4不会变成红色。为什么呢?
原因:
-
1和2中:1所在的p元素,是父元素body元素的第一个子元素,故被选择;而2所在的p元素,则不是body元素的第一个子元素,而是第二个子元素,所以没匹配。
-
3和4中:3所在的p元素,是div元素的第一个子元素,故被选择;4所在的p元素,是div元素的第二个子元素,所以没有被选择
那如果稍作修改:
1
2
3
4
1还是变成红色,3也是变成红色,2和4还是不变。想想为什么?
那如果是这样呢?
1
2
4
3
由上到下显示的是1243。其中1,4,3是红色。
原因:
-
4所在的p元素,能不能被匹配,就看这个p元素是不是其div父元素的第一个子元素。是的,所以它变成红色了。
-
3所在的p元素,其父元素实际上是内层div,它也是内层div的第一个子元素,所以,3也是红色。
对于 p:first-child ,如何匹配?用三句话概括其步骤:
-
要匹配的一定是p元素
-
能不能被匹配?取决于p是不是它父元素的第一个子元素
-
是的话,就匹配;不是的话,就不能匹配!
类型2、div span:first-child
-
匹配的一定是span元素
-
span元素得是它父元素的第一个子元素
-
最后,被匹配的span,得在div下面(E F组合选择器)
div span:first-child { color:red; }
先看一个例子,然后再分析到底是怎么匹配的
1
2
结果:1变红色,2不变。
原因:
-
1所在的span元素,是其父元素div的第一个子元素。同时它也是在div下面,所以被匹配。
-
2所在的span元素,它不是父元素div的第一个子元素,是第二个。不满足第二点条件。
修改一下:
1
2
3
结果:1和2都变成红色了
原因:
-
2所在的span,它的父元素是第二层div,而且也确实是该父元素的第一个子元素。也是在div下的。
-
但是3所在的span,不是第二层div的第一个子元素。故没有匹配。
再修改一下:
2
1
结果:2是红的,1不是红的。
原因:
- 1所在的span,并不是其父元素的第一个子元素。(其子元素是第一层div)
再修改一下!
2
1
结果:1变回红色了!
原因:1所在的span,其父元素是p,那么它确实是父元素的第一个子元素。而且也是在div下的。所以它是红色的。
对于 div span:first-child 进行总结:
-
首先,匹配的一定是span元素
-
再者,这个span元素得是其父元素的第一个子元素
-
最后,符合1,2条件的span元素,得在div下。(类似E F选择器,F相当于span:first-child,E相当于div。E F选择器选的是E下的所有F,所以选的是div下的所有 span:first-child)
类型3、div:first-child span
关于类型3,和类型2可以好好比较一下。
这里直接作总结:
-
选择的一定是span标签
-
span标签一定在满足一定条件的div下
-
div的条件是:div得是其父元素的第一个子元素
E是div:first-child,F是span,要找E下的所有F。
然而E就是要找div,且这个div得是其父元素的第一个子元素。
找到了这样的div,在这些div里面找所有的span标签!
==================================================================
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
-
::first-line只作用于块级元素
-
如上例,所有p元素的首行(first-line),都添加上了属性
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
-
::first-letter只作用于块级元素
-
如上例,所有p元素的首字母(first-letter),都添加上了属性
h1::before {
content: url(smiley.gif);
}
最后
由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容
image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjYzMzIw,size_16,color_FFFFFF,t_70)
h1::before {
content: url(smiley.gif);
}
最后
[外链图片转存中…(img-pUaNgdZV-1715776082879)]
[外链图片转存中…(img-3p191jTI-1715776082880)]
由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容