选择器:
1、标签选择器
以标签名开头,如body,div,p,ul,li

div 
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

2、类选择器
  需对标签取class名,如class="head",格式设置以.+类名开头。

.head
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

指定特定的HTML元素使用class

p.center
{
text-align:center;
}

3、id选择器
 需对标签取id名,以#id名开头,具有唯一性,id="name"

#para1
{
    text-align:center;
    color:red;
}

4、后代选择器
以空格隔开包含关系的元素,用来选择特定元素或元素组的后代。

ul a
{  
    color: red;
}

5、子选择器
以>隔开父子级元素,作用于子元素的第一个后代。

ul li > a 
{ 
     color: red;
}

4,5例子

<ul>
    <li>
        <a href="#">一级菜单</a>##5 只作用此条
        <div>
            <a href="#">二级菜单</a>
            <a href="#">二级菜单</a>
            <a href="#">二级菜单</a>
        </div>
    </li>
    </ul>

6、兄弟选择器

以~隔开,模块名~模块名,修饰~前模块往下的所有兄弟模块

h1 ~ p
{
    color:red;
}

7、相邻选择器
以+隔开,模块名+模块名,修饰+前模块往下的相邻的模块,只有一个

h1+p
{
    color:red;
}

6,7例子

    <p>1</p>
    <h1>2</h1>
    <p>3</p>#7作用,6作用
    <p>4</p>#6作用
    <p>5</p>#6作用

8、全局选择器

*开头,修饰了包含body所有的标签
9、群选择器
修饰大括号前所有的元素

h2, p { color: gray; }

10、属性选择器
以中括号为符号,比如:
修饰属性为type=text的模块:

[type=text]
{
    margin:0;
}

11、伪类选择器

a:link {color:#FF0000;} /* 未访问的链接 */ 
a:visited {color:#00FF00;} /* 已访问的链接 */ 
a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 
a:active {color:#0000FF;} /* 已选中的链接 */
Categories: Web

1 Comment

CSS学习笔记 – xinzipanghuang.home · 2020年8月15日 at 14:35

[…] CSS选择器类型 […]

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *