美文网首页
css选择器,伪类

css选择器,伪类

作者: 小_番茄 | 来源:发表于2018-11-04 21:24 被阅读0次

选择器类型

image.png

1. 标签选择器

标签选择器,所有使用该标签的地方都会做此属性设置


image.png

2.类选择器

示例代码

类选择器,用.类名表示,一个元素可以用多个类选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器</title>
    <style type="text/css">
        h1{color: blue}
        .special { color: green }
        p.special { font-size: 60px}  
        .one{text-decoration: underline;}
    </style>
    <!-- 如果元素已经使用了同一个类,元素还希望设置有别于有设置相同类的元素,则使用元素。类名{属性}设置 -->
</head>
<body>

<h1 class="special">lallala</h1>
<p class="special one">lallala</p>
<!-- 当有多个类引用时 -->
<h1>lallala</h1>
<h1>lallala</h1>
</body>
</html>
效果
image.png

id选择器

  • id选择器id是唯一的,一个html中不要出现相同id。id用#号设置
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器</title>
    <style type="text/css">
        h5{color: blue}
        #special { color: green }
        #one{text-decoration: underline;}
    </style>
    <!-- 如果元素已经使用了同一个类,元素还希望设置有别于有设置相同类的元素,则使用元素。类名{属性}设置 -->
</head>
<body>

<h5 id="special" ="special">lallala</h5>
<p id="one">lallala</p>
<!-- 当有多个类引用时 -->
<h5>lallala</h5>
<h5>lallala</h5>
</body>
</html>

群组选择器

集体统一设置样式。标签选择器,类选择器,id选择器都可以通过群组选择器设置统一样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器</title>
    <style type="text/css">
    h5,#special,#one{text-align: center;}
    /*对类选择器,id选择器,标签选择器一通设置上同一个属性*/
        h5{color: blue}
        #special { color: green }
        p.special{font-size: 12}
        #one{text-decoration: underline;}
    </style>
    <!-- 如果元素已经使用了同一个类,元素还希望设置有别于有设置相同类的元素,则使用元素。类名{属性}设置 -->
</head>
<body>

<h5 id="special" ="special">lallala</h5>
<p id="one">lallala</p>
<!-- 当有多个类引用时 -->
<h5>lallala</h5>
<h5>lallala</h5>
</body>
</html>

全局选择器

通过*号来设置,html里面的所有元素都将持有此属性。同样写在head标签中的style标签中

    *{color: red}

后代选择器

image.png

伪类

比如:像鼠标选中一个链接,点击链接,以及访问完链接回来,链接的颜色属性发生相应改变的效果。

image.png

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器</title>
    <style type="text/css">
        a:link{color: green}    /**未访问 顺序必须这么写,否则没效果**/
        a:visited{color: blue}  /**已访问**/
        a:hover{color: yellow}  /**悬浮 **/
        a:active{color: red}    /** 激活**/
    </style>
    
</head>
<body>
    <a href="http:www.baidu.com">测试伪类</a>
</body>
</html>

相关文章

  • 伪类和伪元素

    伪类:CSS 伪类用于向某些选择器添加特殊的效果。 伪元素:CSS 伪元素用于向某些选择器设置特殊效果。 1、伪类...

  • CSS3选择器

    1CSS选择器的分类 基本选择器 层次选择器 伪类选择器 动态伪类选择器 目标伪类选择器 语言伪类选择器 UI元素...

  • CSS伪类选择器总结

    CSS伪类选择器总结 动态伪类选择器:link, 链接伪类选择器,超链接未被访问前:visited, 链接伪类选择...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • CSS进阶知识点--CSS3伪类选择器和伪元素

    伪类选择器 动态伪类(锚点伪类、用户行为伪类) UI元素状态伪类 CSS3结构伪类 否定选择器 伪元素 动态伪类 ...

  • CSS3选择器--结构性伪类选择器

    在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素: 1、伪类选择器:CSS中已经定义好的选...

  • 伪元素和伪类

    一、伪类 1.1 定义 css伪类:css伪类用于向某些选择器添加特殊效果。 伪类其实与普通的css类相类似,可以...

  • css伪元素

    css 伪元素 详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结, 意在总结连贯...

  • CSS选择器

    简单概括一下CSS的选择器 基本选择器 属性选择器 伪类选择器 动态伪类 常用的四个锚点伪类 UI元素状态伪类 :...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

网友评论

      本文标题:css选择器,伪类

      本文链接:https://www.haomeiwen.com/subject/kwsdxqtx.html