跳至主要内容

CSS选择器总结

在css的学习中有一个很容易让人混乱的就是css选择器，因为选择器有很多种，而且在使用的时候有些类似，有些却相差很远。那么本文就对css选择器，作为一个集中的总结梳理。（注：文中代码因篇幅有限仅写出关键部分代码）

id和class

  • id
    在元素的属性里加上id标签，然后用“#+id名选择”，如
1
#z {text-align:center;}   <p id="z">id标签</p>
  • class
    在元素的属性里加上class标签，然后用”.class名称”选择所有具有相同class名称的元素。如：
1
2
3
4
5
6
7
.center {text-align:center;}
<h1 class="center">flytree</h1>
<p class="center">this line an h1 are centered</p>
<!--也可使特定的元素使用class，如：-->
p.center {text-align:center;}
<h1 class="center">flytree</h1>
<p class="center">only this line is centered</p>
  • 混合
当id和class选择的是同一元素的相同属性时，显示id的效果，如：
1
2
3
4
5
6
7
8
9
10
11
<style>
.center
{
 *text-align:center;*
}
#z {text-align:right;}
</style>
</head>
<body>
<h1 id="z" class="center">同一属性，显示id选择的效果</h1>
</body>

分组和嵌套

  • 分组
当多个元素有共同的css样式描述时可以使用分组减少代码，如：
1
2
3
4
#a,#b,#c {color:blue;}
<p id="a">text</a>
<p id="b">test</a>
<p id="c">text</a>
  • 嵌套
当要操作元素内部的子元素时可以使用嵌套来进行操作，如：
1
2
3
4
div p {text-align:center;}
<div>
<p>name</p>
</div>

组合选择符

  • 后代选取器
以空格分隔,选取改元素的所有后代，其实就是嵌套的选择的格式啦，如：
1
2
3
4
5
div p {text-align:center;}
<div>
<div> <p>name</p> </div>
<p>age</p>
</div>
则name和age都会居中，选择的只要是后代就行，可以是子元素的子元
  • 子元素选择器
以大于号分隔，子选取元素的直接后代，如：
1
2
3
4
5
div>p {text-align:center;}
<div>
<div> <p>name</p> </div>
<p>age</p>
</div>
则只有age会居中显示
  • 相邻兄弟选择器
以加号分隔，若元素有共同的父元素，则可以选择紧接在另一元素后的元素，如：
1
2
3
4
5
6
div+h1 {color:blue;}
<div>
<p>name</p>
<p>age</p>
</div>
<h1>test</h1>
则test的颜色会为蓝色
  • 普通兄弟选择器
以波浪号分隔，若元素有共同的父元素，选取所有指定元素之后的相邻兄弟元素，如：
1
2
3
4
5
6
div~p {color:blue;}
<div>
<h1>test</h1>
</div>
<p>name</p>
<p>age</age>
则name和age都会被选择变为蓝色。

属性选择符

  • 简单属性选择
[属性]使用，无论什么属性，该选择器会选择所有具有该属性的元素，如：
1
2
a[href] {color:green;}
<a href="http://www.baidu.com">baidu</a>
则所有具有href属性的元素都会被选择，baidu和sina就会为绿色。
可以选择多属性，如：
1
2
3
a[href][title] {color:green;}
<a href="http://www.baidu.com" title="baidu">百度</a>
<a href="http://www.sina.com">sina</a>
则只有”百度“会变绿。
  • 属性值选择
选择具体到属性的具体属性值，如：
1
2
3
a[href="http://www.baidu.com"] {color:green;}
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.sina.com">sina</a>
则只有baidu会变绿。
也可以选择多个属性值，如：
1
2
3
4
a[href="http://www.baidu.com"][title="baidu"]
{background-color:green;}
<a href="http://www.baidu.com" title="baidu">百度</a>
<a href="http://www.sina.com">sina</a>
则只有”百度“会变绿。
  • 属性，属性值部分匹配
可以用波浪号”~“只匹配部分进行选择（可以想成约等于），如：
1
2
3
4
5
img[title~="a"] {border:1px solid black;}
<img src="z.jpg" title="a">
<img src="z.jpg" title="a 1"/>
<img src="z.jpg" title="a 2"/>
<img src="z.jpg" title="a_2"/>
前三行都会匹配，但是a_2不匹配（要用子串匹配属性选择器）。
  • 子串匹配属性选择器

伪类和伪元素

  • 伪类
应用在链接里的伪类
1
a:link {color: #FF0000}
1
a:visited {color: #00FF00}
1
a:hover {color: #FF00FF}
1
a:active {color: #0000FF}
first-child伪类
  • 伪元素
first-line：
用于相文中首行设置样式，且只应用于块级元素，可设置的属性有：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
font

color

background

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear
first-letter：
用于设置文本首个字符的样式，且只能用于块级元素，可设置的属性有：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
font

color

background

margin

padding

border

text-decoration

text-transform

vertical-align (仅当 float 为 none 时)

clear

line-height

float

标签：

评论

发表评论

此博客中的热门博文

【图集】言叶之庭（言の葉の庭）

隐约雷鸣 阴霾天空 但盼风雨来 能留你在此 隐约雷鸣 阴霾天空 即使天无雨 我亦留此地 ——万叶集 《言叶之庭》
发表评论
阅读全文

关于Apache本地能访问外网不能访问的问题

在配置apache和tomcat时，把它们都配置好，放到服务器中发现外网不能访问 解决： I,可能是防火墙限制了。 1，首先启动Apache，在本地打开浏览器访问指定路径成功。 2，在系统的控制面板里打开防火墙设置，进入高级设置。 3，在高级设置里右键点击“入站规则”，选择“新建规则”。 4，在规则导向里，类型选“端口”，协议选“TCP”。 5，指定本地端口号“80”。（此处的80与Apache配置里指定的端口号要一致） 6，下一步的“操作”选择“允许连接”即可。 7，“配置文件”选择“域、专用、公用”即可。 8，“名称”和“描述”自定义，能识别即可。最后保存退出。 9, 无需重启apache II,也可能是配置出了问题 可能是配置中没有允许外部访问，则Apache服务器是2.4.0以上 版本，将虚拟主机的进行如下配置： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 < VirtualHost * :80 > < Directory " C: / www "> Options FollowSymLinks AllowOverride All Order allow,deny Allow from all Require all granted </ Directory > ServerAdmin xdfsfsffs@xd.com DocumentRoot "C:/www" ServerName www.test.com ServerAlias test.com ErrorLog "logs/test.bin-error_log" CustomLog "logs/test.bin-access_log" common </ VirtualHost >
发表评论
阅读全文