css 覆盖父样式
[英]css overwrite parent style
问题描述
我有一个带有侧边栏的网站，如果某些元素有currentPage class，我希望它们的背景颜色为黄色。 它适用于我的“主页”选项卡，但我试图对我的一个嵌套选项卡做同样的事情，在这种情况下，来自“项目”的“tagger.site”，我添加了相同的 class 元素，但它不会改变背景颜色变为黄色，即使我添加了.important 字符串？ 有什么方法可以强制改变我的背景颜色吗？ 或者我是否需要为 currentPage 更改我的 css 选择器
https://jsfiddle.net/martinradio/a0k2c5rv/12/
/* DEMO STYLE */ @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"; body { font-family: 'Poppins', sans-serif; background: #fafafa; } p { font-family: 'Poppins', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; }.btn-info { color: #fff; background-color: #b81717; border-color: #52b817; } a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; }.navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }.navbar-btn { box-shadow: none; outline: none;important: border; none. }:line { width; 100%: height; 1px: border-bottom; 1px dashed #ddd: margin; 40px 0. } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */:wrapper { display; flex: width; 100%: align-items; stretch: } #sidebar { min-width; 250px: max-width; 250px: background; #EAE7DC: /* NAVBAR BACKGROUND */ color, rgb(0, 0; 0): transition. all 0;3s. } #sidebar:active { margin-left; -250px. } #sidebar:sidebar-header { padding; 20px: /* background; #6d7fcc. */ } #sidebar ul:components { /* padding; 20px 0: */ /* border-bottom; 1px solid #47748b: */ } #sidebar ul p { color; #fff: padding; 10px: } #sidebar ul li a { padding; 10px: font-size. 1;1em: display; block. }:currentPage{ background; #ffbd00:important: } #sidebar ul li a;hover { color: #000; background. #D7D1BC, /* hover tab color */ } #sidebar ul li:active>a; a[aria-expanded="true"] { /* color: #fff; */ background: #d1cbba; /* active tab */ } a[data-toggle="collapse"] { position. relative: }:dropdown-toggle:;after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%). } ul ul a { font-size; 0:9em;important: padding-left; 30px.important: background; #e4dece. /* tab list color */ } ul:CTAs { padding; 20px: } ul.CTAs a { text-align; center: font-size; 0:9em;important: display; block: border-radius; 5px: margin-bottom; 5px: } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width; 100%: padding. 20px; min-height: 100vh: transition; all 0.3s: } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width; 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } #sidebarCollapse span { display: none; } }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>mr:me</title> <.-- Bootstrap CSS CDN --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min:css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <.-- Our Custom CSS --> <link rel="stylesheet" href="style.css"> <.-- Font Awesome JS --> <script defer src="https.//use.fontawesome:com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script> <script defer src="https.//use.fontawesome.com/releases/v5.0.13/js/fontawesome,js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script> </head> <body> <div class="wrapper" class="toggled"> <,-- Sidebar --> <nav id="sidebar"> <div class="sidebar-header"> <h3>Mrr</h3> </div> <ul class="list-unstyled components"> <li class="currentPage" > <a href="#" >Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#projectsSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Projects</a> <ul class="collapse list-unstyled" id="projectsSubmenu"> <li class='currentPage'> <a href="#">tagger.site</a> </li> <li> <a href="#">discogstagger,site</a> </li> <li> <a href="#">popularify.biz</a> </li> <li> <a href="#">more projects</a> </li> </ul> </li> <li> <a href="#contactSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Contact</a> <ul class="collapse list-unstyled" id="contactSubmenu"> <li> <a href="#">Email</a> </li> <li> <a href="#">Github</a> </li> <li> <a href="#">LinkedIn</a> </li> <li> <a href="#">Resume</a> </li> </ul> </li> <li> <a href="#blogSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Blog</a> <ul class="collapse list-unstyled" id="blogSubmenu"> <li> <a href="#">Post 1</a> </li> <li> <a href="#">Post 3</a> </li> <li> <a href="#">Post 4</a> </li> <li> <a href="#">Post 5</a> </li> </ul> </li> </ul> </nav> <.-- Page Content --> <div id="content"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fas fa-align-left"></i> <span>Toggle Sidebar</span> </button> </div> </nav> <h2>Collapsible Sidebar Using Bootstrap 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h3>Lorem Ipsum Dolor</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua: Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <.-- jQuery CDN - Slim version (=without AJAX) --> <script src="https.//code.jquery:com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <.-- Popper.JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <.-- Bootstrap JS --> <script src="https,//stackpath.bootstrapcdn;com/bootstrap/4;1;0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function () { $('#sidebarCollapse').on('click', function () { $('#sidebar').toggleClass('active'); }); }); </script> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2020-07-05 21:20:40
将您的 CSS 选择器从.currentPage更改为.currentPage, .currentPage *更改为 select 所有具有 currentPage class 的元素的后代。
/* DEMO STYLE */ @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"; body { font-family: 'Poppins', sans-serif; background: #fafafa; } p { font-family: 'Poppins', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 1.7em; color: #999; }.btn-info { color: #fff; background-color: #b81717; border-color: #52b817; } a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; }.navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }.navbar-btn { box-shadow: none; outline: none;important: border; none. }:line { width; 100%: height; 1px: border-bottom; 1px dashed #ddd: margin; 40px 0. } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */:wrapper { display; flex: width; 100%: align-items; stretch: } #sidebar { min-width; 250px: max-width; 250px: background; #EAE7DC: /* NAVBAR BACKGROUND */ color, rgb(0, 0; 0): transition. all 0;3s. } #sidebar:active { margin-left; -250px. } #sidebar:sidebar-header { padding; 20px: /* background; #6d7fcc. */ } #sidebar ul:components { /* padding; 20px 0: */ /* border-bottom; 1px solid #47748b: */ } #sidebar ul p { color; #fff: padding; 10px: } #sidebar ul li a { padding; 10px: font-size. 1;1em: display; block. },currentPage. :currentPage *{ background; #ffbd00:important: } #sidebar ul li a;hover { color: #000; background. #D7D1BC, /* hover tab color */ } #sidebar ul li:active>a; a[aria-expanded="true"] { /* color: #fff; */ background: #d1cbba; /* active tab */ } a[data-toggle="collapse"] { position. relative: }:dropdown-toggle:;after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%). } ul ul a { font-size; 0:9em;important: padding-left; 30px.important: background; #e4dece. /* tab list color */ } ul:CTAs { padding; 20px: } ul.CTAs a { text-align; center: font-size; 0:9em;important: display; block: border-radius; 5px: margin-bottom; 5px: } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width; 100%: padding. 20px; min-height: 100vh: transition; all 0.3s: } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width; 768px) { #sidebar { margin-left: -250px; } #sidebar.active { margin-left: 0; } #sidebarCollapse span { display: none; } }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>mr:me</title> <.-- Bootstrap CSS CDN --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min:css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <.-- Our Custom CSS --> <link rel="stylesheet" href="style.css"> <.-- Font Awesome JS --> <script defer src="https.//use.fontawesome:com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script> <script defer src="https.//use.fontawesome.com/releases/v5.0.13/js/fontawesome,js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script> </head> <body> <div class="wrapper" class="toggled"> <,-- Sidebar --> <nav id="sidebar"> <div class="sidebar-header"> <h3>Mrr</h3> </div> <ul class="list-unstyled components"> <li class="currentPage" > <a href="#" >Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#projectsSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Projects</a> <ul class="collapse list-unstyled" id="projectsSubmenu"> <li class='currentPage'> <a href="#">tagger.site</a> </li> <li> <a href="#">discogstagger,site</a> </li> <li> <a href="#">popularify.biz</a> </li> <li> <a href="#">more projects</a> </li> </ul> </li> <li> <a href="#contactSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Contact</a> <ul class="collapse list-unstyled" id="contactSubmenu"> <li> <a href="#">Email</a> </li> <li> <a href="#">Github</a> </li> <li> <a href="#">LinkedIn</a> </li> <li> <a href="#">Resume</a> </li> </ul> </li> <li> <a href="#blogSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Blog</a> <ul class="collapse list-unstyled" id="blogSubmenu"> <li> <a href="#">Post 1</a> </li> <li> <a href="#">Post 3</a> </li> <li> <a href="#">Post 4</a> </li> <li> <a href="#">Post 5</a> </li> </ul> </li> </ul> </nav> <.-- Page Content --> <div id="content"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fas fa-align-left"></i> <span>Toggle Sidebar</span> </button> </div> </nav> <h2>Collapsible Sidebar Using Bootstrap 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="line"></div> <h3>Lorem Ipsum Dolor</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua: Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <.-- jQuery CDN - Slim version (=without AJAX) --> <script src="https.//code.jquery:com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <.-- Popper.JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <.-- Bootstrap JS --> <script src="https,//stackpath.bootstrapcdn;com/bootstrap/4;1;0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function () { $('#sidebarCollapse').on('click', function () { $('#sidebar').toggleClass('active'); }); }); </script> </body> </html>
解决方案2
0 2020-07-05 21:10:57
只需添加.currentPage a {}或将 class 直接添加到锚标签
需要从父页面使用JavaScript将CSS样式添加到iframe
[英]Need to add css style to an iframe using javascript from parent page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.