您的位置：首页 > Web前端 > CSS

CSS选择器若干笔录

2016-05-16 09:47 531 查看

刚刚学习CSS，掺杂着自己的理解，欢迎交流。

一、位置定位法。

比如div p ，div>p 这样的位置表现

二、属性定位法。

这类选择器。理解顺序很重要。要从后往前理解，后面是前面元素的修饰词

比如 P;first-child 是属于父元素第一个元素的P。而不是从前往后理解，P下面的第一个元素。
同理其他last-child ,nth-child(n)

三、其他

比如 ::selection :target :focus :root :not()(eg:not(p)) :enabled :disabled :checked

:focus，我理解，所有的输入元素，或者可以通过键盘响应的元素（按钮，链接元素a）都可以通过:focus 获取

以上是最基本的。参考w3cschool。熟悉之后可以混合使用。

比如位置定位法+属性定位法：

#sec2 span:nth-child(2){ ······}//意思是ID值sec2 下是父元素第二个子元素的 span

#sec2 :first-child//意思是ID值sec2下，所有！所有！所有父元素第一个子元素

页面代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Test for css</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./csstest.css">
<style type="text/css">
</style>
</head>
<body>
<div>
CSS选择器分3种。
1.按照区域位置进行定位。
2.按照属性进行元素的定位和选择。
3.其他比如::selection，:target，:focus :root
Sec-1 按照区域定位选择器。

我家血脉所以左边都是红；儿子辈分右边都是黑

<p class="first_child_and_first_p">大儿子；第一个儿子所以上边绿</p>
<p>二儿子</p>
<span><p>三孙子；第一个儿子所以上边绿；最后的儿子所以字体粗;唯一的儿子背景黄</p></span>
<p>四儿子;最后的儿子所以字体粗</p>

</div>

<p>我是紧挨着div(我不属于div)，底部边框蓝色</p>

<a href="http://www.sina.com" target="_blank" name="to a" title="to sina">To Sina</a><br>
<a href="http://www.baidu.com" name="to b" title="to baidu">To Baidu</a><br>
<input></input>
<!--
*让我们试试位置定位法 和属性定位的混合使用
-->
<hr>
Let try sth new
<div id="sec2">
<i>大儿子;第一子所以字体重黑!!!  </i>
<i><span>一孙（二儿子的大儿子）;第一子所以字体重黑!!!  </span><span>二孙（二儿子的二儿子）;父元素第二个span所以背景红!!!  </span></i>
<i>三儿子   </i>
</div>
</body>
</html>

CSS文件内容如下：

/*
*一、按照区域位置进行定位的
*/
#select1 p{
border-left: thick solid red;
}
#select1>p{
border-right:thick solid black;
}

#select1+p{
/*
*紧挨着div元素之后！之后！之后的P元素。
* P的位置是在</div>之后，而不是<div>之后。p不是div的第一个元素，不是div的子元素
*/
border-bottom:thick solid blue;

}

/*
* 二、按照属性进行元素的定位和选择

*这类选择器。理解顺序很重要。要从后往前理解，后面是前面元素的修饰词
*比如P;first-child  是属于父元素第一个元素的P。而不是从前往后理解，P下面的第一个元素。
*同理其他last-child ,nth-child(n)
*/
/*
*像<br>这种没有输出的元素，在定位的时候，也是算入的。比如在身为first-child的P元素之前插入了<br>
*那么<br>就变成了first-child
*/
p:first-child{
border-top:thick solid green;
}
p:nth-child(2){
/*
*nth-child 索引是从1开始，而不是从0
*/
border-top:thick solid pink;
}
p:last-child{
font-weight: bold;
}
p:only-child{
background-color: yellow;
}
/*
*first-child 和 first-of-type区别在于。前者是父元素的第一个元素。后者是所有子元素中，同类元素第一个。
*eg：父有10子。大儿子就是first-child。3，7，8儿子都是P（eg大学生），3是first-of-type。
*last-of-type，以及nth-of-type(n)不再列举了

***************************************************************************
:before  以及 :after 非常有趣;它可以在内容之前加些内容。在我开来和JS有些异曲同工之妙。以后不用js获取元素内容在改动怎样的，直接切换个css样式就得
*/

p:before{
content:"WORDS:  ";
color:red；
}
p:after{
content:"  :END";
collor:red;
}

/*
***************************************************************************
哇塞这个重要了。
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
······································
[attribute^=value]
[attribute$=value]
[attribute*=value]
为什么说重要？1、可以通过属性直接锁定含有属性条件的元素（集）。2、他们如此相同，却如此不同。初学容易混淆。区别在于，第一组value是一个单词/词组！单词/词组！单词/词组！value是一个独立部分。第二组value是部分字符串！部分字符串！部分字符串！就这个连接性的区别
tips：任何一组，value都要用字符形式表达。name=22和name="22"绝对不同
*/
[target=_blank]{
font-size: larger;
}

[name*="to"]{
border:1px solid red;
}

a:link{

}
a:hover{
background-color: red;
}
a:focus{
background-color: green;
}
a:active{
background-color: yellow;
}
a:visited{
background-color: pink;
}

/*
* 三、其他
*比如     ::selection    :target    :focus      :root     :not()(eg:not(p))   :enabled    :disabled    :checked
*:focus，我理解，所有的输入元素，或者可以通过键盘响应的元素（按钮，链接元素a）都可以通过:focus  获取
*/
:focus{
font-weight: bold;
background-color: blue;
}

/*
*Let's try sth New
*让我们试试位置定位法 和属性定位的混合使用
*/

#sec2 span:nth-child(2){
/*
*ID值sec2 下 是父元素第二个子元素的 span
*/
background-color:red;
}

#sec2 :first-child{
/*
* 翻译为ID值sec2下，所有！所有！所有父元素第一个子元素（而不是只是sec2的第一个元素）
*/
font-weight:bold;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航

CSS选择器 若干笔录

CSS选择器若干笔录